Problemi con i div

jokerinos

Problemi con i div

Salve a tutti , come si va ? tutto bene ? spero di si , sono un new bie e sto cercando di capire come funzionano i css , ho conoscenza del php pero' i css non mi entrano in testa quindi sto sbattendo la test per creare un semplice div.
Il mio problema sta che sto modificando un template di wordpress e mi sono fermato al primo livello cioe' vorrei far si che l'articolo di una categoria venga visualizzato in questa maniera :

bgdinformatica.it/img/ESEMPIO.jpg

pero' non ci sto riuscendo la riga di codice che mi interessa e' questa :

<div id="container">
<div id="featured">
<div class="containerhomepage">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?><img src="<?php viva('BnMainFea','1'); ?>" alt="" class="featuredImage" /></a>
<?php $do_not_duplicate = array(); $a = 1; $feaQuery = new WP_Query('showposts=2&cat='.$bnews_options["feaCatID"].'&offset='.$bnews_options["feaPostSkip"]); ?>
<?php while ($feaQuery->have_posts()) : $feaQuery->the_post(); ?>
<?php $do_not_duplicate = $post->ID; ?>
<li>
<div class="sliderContent">

pero' non riesco a far visualizzare gli articoli in quella maniera in quanto il tutto e' gestito da un foglio di stile qualcuno puo' darmi un consiglio in merito grazie

marinski

Trova questo foglio di stile e posta il codice dei pezzi interessati: container, featured, featuredImage, containerhomepage e sliderContent!!!

Da quel che ho capito, per ora il tuo codice è tipo questo...

<a href="link_titolo">**<Titolo><Immagine>**</a>
**<Post>**

Un esempio di come ti si presenta tuttora l'articolo sarebbe gradito!
Perché non fornisci il link del sito? (senza www se no non te lo lascia mettere)

jokerinos

Grazie per il tuo aiuto :

#container {
width:550px;
float:left;
}

/* FEATURED SECTION /
#featured { / Featured tab starting from image till end of post excerpt /
padding-bottom:5px;
border-bottom:1px solid #ddd;
width: 550px;
margin-bottom:5px;
height:250px; / If post doesn't fit to the defined height, increase that value and the value of container below /
position: relative; / Used relative positsioning to define the location of << and >> links as absolute /
}
ul {
width: 500px;
position: relative;
top: 0;
left: 0;
}
ul li {
float:left;
width:480px;
}
.container { / If post doesn't fit to the defined height, increase that value and the value of above /
position: absolute;
overflow:hidden;
width: 480px;
height: 500px;
}
.sliderContent { / This division contains only featured image and post title /
position:relative; / Relative posisioning is used to define the location of title as bottom of image */
height:120px;
width:200px;
margin-bottom:3px;

		}
	 .featuredImage { /* Image used on featured section, positsioned as absolute */
		width:200px;
		height:120px;
			display:block;
			position:absolute;
			z-index:1; /* since image goes behind the title, z-index value is assigned as 1. The title classname is h2.featuredTitle and the z-index value for title is 2 */
			overflow:visible;
			right:5px;
			left:5px;
			top:15px;

			
		}
 .previous_button { /* Class kepts the attributes for  previous (<<) before the numbers on slider navigation*/
		position: absolute;
		font-size:1.7em;
		top:274px;
		right:82px;
		color:#222;
		z-index:1;
		cursor:pointer;
	}
 .previous_button_disabled {
		cursor:default;
		color:#999;
	}
 .next_button {  /* Class kepts the attributes for  next (>>) after the numbers on slider navigation*/
		position: absolute;
		font-size:1.7em;
		top:274px;
		right:3px;
		z-index:1;
		color:#222;
		cursor:pointer;
	}
 .next_button_disabled {
		cursor:default;
		color:#999;
	}
 .feaScrollBar { /* The division wrapper for the line between post excerpt and featured post image */
		color:#222;
		background:#efefef;
		position:relative; /* Relative position is used to define location of slider number as absolute */
		display:block;
		padding:2px 5px;
		margin-bottom:5px;
	}
 .feaPostMeta { /* Text style for "Written on, Filed in..." between postexcerpt and featured post image */
		font-size:.9em;
	}
 .feaPostMeta a {
		color:#8F3808;
	}
 .feaPostMeta a:hover {
		color:#222;
		text-decoration:none;
	}
 .scrollBarLinks { /* Slider numbers placed between << and >> */ 
		position:absolute;
		width:60px;
		color:#999;
		text-align:center;
		right:20px;
		top:0;
	}
 .scrollBarLinks a {
		color:#222;
		margin:0 2px;
	}
 .scrollBarLinks a:hover {
		color:#999;
		margin:0 2px;
	}
 a.sliderCurrent {
		color:#999;
		margin:0 2px;
	}

#containerhomepage{
width:500px;
float:left;
}

puoi vedere il risultato sul a questo indirizzo bgdinformatica.it/img/esempio2.jpg.

Poi scusami se non metto il sito ma non vorrei fare pubblicità o creare spam.

Grazie

marinski

Non si capisce bene dall'immagine... perché il primo articolo è sballato e gli altri sono a posto?

jokerinos

esatto allora vorrei far si che anche il primo articolo si vedesse come gli altri pero' un po' piu' largo.

secondo te e' possibile

marinski

Non capisco perché il primo articolo sia diverso dagli altri...
Hai toccato qualcosa tu?

jokerinos

Ho trovato la soluzione mo ti faccio vedere

jokerinos

Allora ho cambiato il theme e sono riuscito a capire come fare quello che stavo cercando di fare ( scusa il giro di parole ).

Parte css :

#primapagina{
font-family:"Times New Roman", Times, serif;
font-size:14px;
text-align:left;
text-transform:uppercase;
}
#titolo{
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
text-align:left;
text-transform:uppercase;
}

#primapaginaright{
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
text-align:right;
text-transform:uppercase;
}
.titoloright {
font-family:"Times New Roman", Times, serif;
font-size:18px;
text-transform:uppercase;
text-align:right;

}
.testoarticolo{
font-family:"Arial , Helvetia , sans-serif";
font-size:14px;
font-style:normal;
font-weight:bold;
text-align:right;
}
.immaginearticolo1{
float: left;
margin: 0 5px 5px 0;
width: 125px;
}
.immaginearticolo2{
float: right;
margin: 0 5px 5px 0;
width: 125px;
}

Parte HTML :

<div class="primapagina">
<div class="titolo">Le Ultime Notizie</div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo1"'); ?></a><?php the_excerpt(''); ?>
</div>

<div class="primapaginaright">
<h2 class="titoloright"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<h2 class="testoarticolo"><a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo"'); ?></a><?php the_excerpt(''); ?></h2>
</div>

Ecco il link per vedere l'immagine
bgdinformatica.it/esempio3.gif

marinski

Ottimo servirà anche ad altri

jokerinos

Ciao , falso allarme , mi sono accorto che non veniva come dicevo io ti ripubblico le stringhe di codice che interessano la parte che non va bene :

<div class="primapagina">
<div class="titolo">Le Ultime Notizie</div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo"'); ?></a><h2 class="testoarticolo"><?php the_excerpt(''); ?></h2>
</div>

<div class="primapaginaright">
<h2 class="titoloright"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo"'); ?></a><h2 class="testoarticolo"><?php the_excerpt(''); ?></h2>
</div>
<?php endif; ?>

PARTE CSS :

#navigation_right {
float: left;
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
border:thin;
}
h3{
font-style:normal;
font:small-caption;
font-family:"Times New Roman", Times, serif;
font-size:large;

}
#novitadititolo{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
float:left;
text-align:left;

}
#riassuntohome
{
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
float:right;
text-align:justify;
position:relative;
left:10px;
right:10px;
}
#primapagina{
font-family:"Times New Roman", Times, serif;
font-size:14px;
text-align:left;
text-transform:uppercase;
}
.titolo{
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
text-align:left;
text-transform:uppercase;
}

.primapaginaright{
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
text-align:right;
text-transform:uppercase;

}
.titoloright {
font-family:"Times New Roman", Times, serif;
font-size:18px;
text-transform:uppercase;
text-align:right;

}
.testoarticolo{
font-family:"Arial , Helvetia , sans-serif";
font-size:14px;
font-style:normal;
font-weight:bold;
text-align:justify;
width: 640px; height: 230px;
position:static;

.immaginearticolo1{
float: left;
margin: 0 2px 2px 0;
width: 125px;
}
.immaginearticolo2{
float: right;
margin: 0 5px 5px 0;
width: 80px;
}

IMMAGINE DI COME VIENE :

bgdinformatica.it/esempio4.jpg

ci puoi dare un occhiata e ne parliamo insieme , il problema e che non riesco a far venire allineati alla foto il testo dell'articolo sto vedendo le guide sui posizionamenti css ma non mi riesce mi dai tu qualche dritta.

Grazie

marinski

Prova così e vedi che ti esce...

HTML:
[HTML]
<div id="container">
<?php
if (have_posts()) : the_post();
$arc_year = get_the_time('Y');
$arc_month = get_the_time('m');
$arc_day = get_the_time('d');
?>

<div class="titoloprincipale">Le Ultime Notizie</div><br />

<div class="titolo"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div><br />
<a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo1"'); ?></a><div class="testoarticolo"><?php the_excerpt(''); ?></div>

<div class="titoloright"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<a href="#"><?php dp_attachment_image($post->ID, 'thumbnail', 'alt="' . $post->post_title . '" class="immaginearticolo2"'); ?></a><div class="testoarticoloright"><?php the_excerpt(''); ?></div>

</div>

<?php endif; ?>
[/HTML]

...e CSS:


#navigation_right {
float: right;
padding: 20px 0 10px 0;
margin-right: 15px;
width: 190px;
border:thin;
}

h3 {
font-style:normal;
font:small-caption;
font-family:"Times New Roman", Times, serif;
font-size:large;
}

#novitadititolo {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
float:left;
text-align:left;
}

#riassuntohome {
font-family:"Arial, Helvetica, sans-serif";
font-size:14px;
float:right;
text-align:justify;
position:relative;
left:10px;
right:10px;
}

#primapagina {
float: left;
padding:5px;
}

.titoloprincipale {
font-family:"Arial, Helvetica, sans-serif";
font-size:18px;
text-align:left;
text-transform:uppercase;
padding:4px;
text-weight:bold;
}

.titolo {
font-family:"Arial, Helvetica, sans-serif";
font-size:18px;
text-align:left;
text-transform:uppercase;
padding:4px;
}

.titoloright {
font-family:"Times New Roman", Times, serif;
font-size:18px;
text-transform:uppercase;
text-align:right;
padding:4px;
}

.testoarticolo {
font-family:"Arial , Helvetia , sans-serif";
font-size:14px;
font-style:normal;
text-align:left;
width: 640px;
float: left;
margin-left:145px;
}

.testoarticoloright {
font-family:"Arial , Helvetia , sans-serif";
font-size:14px;
font-style:normal;
text-align:right;
float: right;
margin-right:145px;
}

.immaginearticolo1 {
float: left;
margin: 0 5px 5px 0;
width: 125px;
}

.immaginearticolo2 {
float: right;
margin: 0 5px 5px 0;
width: 125px;
}

...e per favore scrivimi l'url senza WWW così comprendo meglio!
Ciao.

jokerinos

Guarda ilportaledinapoli.com/sites/

Vedi come viene.

marinski

Ma non vedi che è gia un Blog pronto? Non toccare l'html è gia tutto preparato!

jokerinos

Scusa e' tu dici e' un blog pronto ma secondo le loro esigenze.

Gli articoli in basso i colori sono tutta opera mia , mi sono solo bloccato con quegli articoli che non riesco a incolonnare. quei due articoli

jokerinos

Ho bisogno di inserire gli articoli di una determinata categoria in quel box in alto e il vero template non prevede tale funzione per questo ho dovuto modificare.

Grazie

marinski

Se vuoi che gli articoli finiscano automaticamente lì hai bisogno di modificare una parte del php.
Ti consiglio di riproporre la domanda nella sezione CMS o Php.

jokerinos

Quindi tu dici che non e' un problema di css.

Cordiali saluti