trenger hjelp med div/CSS

Tha_Zaynt · 3. oktober 2004

Jeg bruker koden under for å vise nyheter på siden min. Problemet er at skrifta flytter seg i forhold til bildet, så det ser helt rart ut. Dessuten har jeg brukt tbales, og vil gjerne gå over til divs.

if (!$URL){
echo "
<table class='tdtop' width='50%' cellpadding='2' border='1'>
<tr>
<td class='tekst' align='left'>$tittel</td>
</tr>
</table>
<table class='tdmid' cellpadding='2' width='50%' border='1'>
<tr>
<td valign='top' align='left'>$nyhet</td>
</tr>
</table>
<table class='tdbottom' cellpadding='2' width='50%' border='1'>
<tr>
<td class='tekst2' align='left'>skrevet $dato av $navn </td>

<td align='right' class='tekst2'> [ <a href=\"slettinnhold.php?id=$id\">Slett</a> | <a href=\"rediger.php?id=$id\">Rediger</a> ]</td>

</tr>
</table>
<p>";  
}
else{
echo "
<table class='tdtop' width='50%' cellpadding='2' border='1'>
<tr>
<td class='tekst' align='left'>$tittel</td>
</tr>
</table>
<table class='tdmid' cellpadding='2' width='50%' border='1'>
<tr>
<td valign='top' align='left' wifth='20%'>$URL</td><td valign='top' align='left'>$nyhet</td>
</tr>
</table>
<table class='tdbottom' cellpadding='2' width='50%' border='1'>
<tr>
<td class='tekst2' align='left'>skrevet $dato av $navn </td>

<td align='right' class='tekst2'> [ <a href=\"slettinnhold.php?id=$id\">Slett</a> | <a href=\"rediger.php?id=$id\">Rediger</a> ]</td>

</tr>
</table>
<p>";

}

style.css

body {
background-color: #F0F9FE;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin:10px;
}
p, td {
font-size: 12px;
border: none #000000;

}
a {
color: #004482;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #007EFF;
text-decoration: none;
}
input, textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #DDE5EB;
font-size: 12px;
color: #000000;
border: 1px solid #000000;
padding: 1px;
}
.knapp {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #DDE5EB;
font-size: 11px;
color: #000000;
border: 1px solid #000000;
padding: 1px;
}
.tdtop {
border: 1px solid #000000;
background: #DDE5EB;
}
.tdmid {
border-top: 1px none #000000;
border-right: 1px solid #000000;
border-bottom: 1px none #000000;
border-left: 1px solid #000000;
background: #E7EFF5;
}
.tdbottom {
border-top: 1px none #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
background: #E7EFF5;

}
.tekst {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
.tekst2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: lighter;
}

Endret 3. oktober 2004 av Tha_Zaynt

mikk- · 3. oktober 2004

Vi ser ikke noe bilde, vi.

Tha_Zaynt · 3. oktober 2004

bildet er $URL

FuLu · 3. oktober 2004

Linje 32 eller noe:

<td valign='top' align='left' wifth='20%'>$URL</td><td valign='top' align='left'>$nyhet</td>

Der ser du at det står wifth='20%', er kanskje denne som ødelegger litt?

Tha_Zaynt · 3. oktober 2004

nope, har prøvd uten også...

JohnRichard · 4. oktober 2004

Tror han ville frem til at det skal være "width"

:dontgetit:

Tha_Zaynt · 4. oktober 2004

hehe...så ikke den :blush: Funka nå ja, men jeg vil helst ha det slik at $URL og $Nyhet ligger i samme div og at teksten legger seg rundt bildet..Hvordan får jeg til det?

Tha_Zaynt · 4. oktober 2004

inge n som vet?

Simon Zimmermann · 4. oktober 2004

Legg bilde og tekst sammen og set float-egenskap på bilde.

Tha_Zaynt · 4. oktober 2004

blir det da slik? ;

img {
float: left;
}

Haraldson · 4. oktober 2004

Ja, det blir det.

Tha_Zaynt · 4. oktober 2004

Av en eller annen grunn blir teksten (nyheten) til en link til bildet når jeg legger $URL og $nyhe i samme td.

Endret 4. oktober 2004 av Tha_Zaynt

FuLu · 4. oktober 2004

Tok meg gleden av og gjøre om koden din til tableless kode. Du får studere html og css: http://home.chello.no/alexholm/hw.no/zaynt/ og http://home.chello.no/alexholm/hw.no/zaynt/stil.css

Tha_Zaynt · 4. oktober 2004

Takk for hjelpen! Nesten i mål nå, bare noen småting..Jeg har også smileys i nyhetene mine, derfor kan jeg ikke bruke padding på img {} for da ser det litt rart ut..

link

Jeg vil fortsatt at det skal være space mellom bildene og teksten...hvordan løser jeg det problemet?

slik ser koden ut nå:

if (!$URL){
echo "
<div class='news'>
<div class='border'>
	<h2>$tittel</h2>
        $nyhet
	<div class='author'>skrevet $dato av $navn</div>
	<div class='option'>[ <a href='slettinnhold.php?id=$id'>Slett</a> | <a href='rediger.php?id=$id'>Rediger</a> ]</div>
	<div class='clear'></div>
</div>

</div>
<p>";  
}
else{
echo "
<div class='news'>
<div class='border'>
	<h2>$tittel</h2>
	$URL
	$nyhet
	<div class='author'>skrevet $dato av $navn</div>
	<div class='option'>[ <a href='slettinnhold.php?id=$id'>Slett</a> | <a href='rediger.php?id=$id'>Rediger</a> ]</div>
	<div class='clear'></div>
</div>
</div>
<p>";

}

a {
color: #004482;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #007EFF;
text-decoration: none;
}

body {
background-color: #F0F9FE;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin: 10px;
}

div.news {
background-color: #E7EFF5;
padding: 3px;
margin-bottom: 1em;
width: 50%;
}

div.news .author {
clear: left;
float: left;
padding: 5px;
}

div.news .border {
border: 1px solid #000000;
}

div.news .clear {
clear: both;
}

div.news .option {
float: right;
padding: 5px;
}

div.news h2 {
background-color: #DDE5EB;
border-bottom: 1px solid #000000;
font-size: 1em;
margin: 0;
padding: 5px;
}

div.news img {
float: left;
}

div.news p {
font-size: 1em;
margin: 0;
padding: 5px 5px 1em 5px;
}

FuLu · 4. oktober 2004

Du kan gi det bildet egene klasse med padding og floating. Regner med at smilies sakene ikke skal floates eller paddes.

Du kan da ha f.eks:

div.news img.image {
float: left;
padding: 5px;
}

div.news img.smily {
/*et eller annet du måtte trenge på en smily*/
}

Er ikke sikkert du trenger smily klassen i heletatt men. Uansett, så bruker du da <img class="image"... på det bildet som skal ha padding og floates left. Så kan smily bildet ha <img class="smily".. om det trengs.. jeg tror egentlig ikke smily bilde trenger noe klasse. Men bruker du klasse på bildet, så vil ikke smily få de samme egenskapene.

Tha_Zaynt · 4. oktober 2004

må ikke bildet hete image da?

FuLu · 4. oktober 2004

Nei, det er bare en stylesheet klasse, har ikke noe med navnet på bilde å gjøre.

Tha_Zaynt · 4. oktober 2004

må jeg da ha:

<div class='image'>$URL</div> eller?

FuLu · 4. oktober 2004

må jeg da ha:
<div class='image'>$URL</div> eller?

Nei

Jeg skrev jo litt hvordan du skulle ha det. Det er jo selvfølgelig <img class="image">.. nå vet jeg ikke hvordan du genererer $URL, men det virker som denne alt er en <img> sak? Uansett, det er <img> tag'en du må sette klassen på.

Oppdaterte sample nå med en smily http://home.chello.no/alexholm/hw.no/zaynt/

Endret 4. oktober 2004 av FuLu

Tha_Zaynt · 4. oktober 2004

ahh...ok, skjønner...trodde jeg

Bildet blir lagret til databasen slik:

$url = "<a href=\"$path$nyttnavn\"><img class='image' border=\"0\" src=\"$path$nyttnavn_thumb\" alt=\"\"></a>";

blir ikke det rett?

EDIT: Fant det ut..det blir slik:

$url = "<a href=\"$path$nyttnavn\"><img class=\"image\" border=\"0\" src=\"$path$nyttnavn_thumb\" alt=\"\"></a>";

Endret 4. oktober 2004 av Tha_Zaynt

trenger hjelp med div/CSS

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer