Gå til innhold

CSS: Problemer med float

Amnio

Av Amnio
i Programmering og webutvikling

Anbefalte innlegg

Amnio

Amnio

Skrevet
Skrevet

Har ei side der jeg har en header for hver nyhet. I denne headeren er det et gradientbilde som repeteres i bakgrunnen og en nyhetstittel på toppen.

 

Jeg ønsker å utvide dette med avrundede hjørner, dato og et beskrivende ikon (varierer avhengig av nyhet), noe som medførte en del problemer. Se nedenfor for hvordan jeg hadde tenkt meg det. Det jeg altså lurer på er hvordan best implementere dette? Har testet litt med float, men fikk ikke helt dreisen på det da det er mange forskjellige elementer.

 

Har altså alle elementene som skal settes sammen, men det er selve sammensettningen som streiker, noen tips?

 

Siden lages i HTML 4.01 strict+CSS (uten tables)

post-76-1126217307_thumb.png

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
endrebjo

endrebjo

Skrevet
Skrevet (endret) 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="nyheter">
<img class="nyhet" src="bilde.gif" width="20px" height="40px" alt="img" />
<p class="tittel">Nyhetens tittel</p>
<p class="dato">Torsdag 8. September 2005</p>
</div>

<div id="content"><p>Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! 
Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! Endre er tøff! </p>
</div>
</body>

</html>

 

html {
width: 100%;
font-family: "Trebuchet MS", verdana;
}

body {
width: 700px;
margin: 0 auto;
}

div#nyheter {
width: 100%;
clear: both;
height: 2em;
}

div#content {
width: 100%;
clear: both;
}

img.nyhet {
width: 20px;
float: left;
margin: 4px;
}

p.tittel {
width: auto;
float: left;
font-weight: bold;
}

p.dato {
width: auto;
float: right;
font-style: italic;
}

Noe sånt?

(masse finpuss må selvfølgelig til, men grunnlaget er vel der)

Endret av endrebjorsvik89
Lenke til kommentar
Amnio

Amnio

Skrevet
  • Forfatter
Skrevet

Takker for hjelpa Endre. Har nå tukla litt mer med det og hvis du ser på bildet under så har jeg kommet fra det øverste resultatet til det nederste. Måtte imidlertid jukse litt ved å sette sammen hele toppbakgrunnen til ett bilde først.

 

HTML-koden som sikkert også kan klassifiseres som "semantisk kaos", ser slik ut for øyeblikket:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 <title>Testside</title>
 <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content">
 <div class="newsitem">
 	<div class="newstop">
   <img src="assets/3D.png" width="20px" height="19px" alt="img"/>
   <h2>Nyhetens Tittel</h2>
   <p class="dato">Torsdag 8. September 2005</p>
 	</div>
 	<div class="newscontent">
   <p>
   	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
   </p>
 	</div>
 	<div class="newsbottom">
    
 	</div>
 </div>
</div>



</body>
</html>

Sammen med denne CSS-koden:

body {
background: #EEEEEE
}

.newsitem
{
width: 340px;
margin: 10px 10px 10px 10px;
padding: 0;
color: #333;
font-size: 13px;
}

.newscontent
{
background-color: #fff;
padding: 10px 16px 10px 15px;
border-left: 1px solid #C1C1C1;
border-right: 1px solid #C1C1C1;
}

.newscontent p 
{
margin: 0 0 0.5em 0;
}

.newstop
{
padding: 0 8px;
margin: 0;
background-color: #EEEEEE; /*gjennomsiktige hjørner, så må ha bakgrunnen til å stemme overens med #content*/
height: 23px;
background-image: url(../assets/topbg.png);
font-size: 14px;
}

.dato {
padding: 4px 0px;
width: auto;
float: right;
margin: 0;
font-style: italic;
}

.newstop img
{
float:left;
margin: 3px 0px;
padding: 0;
}

.newstop h2
{
margin: 0;
padding: 3px 4px;
float:left;
font-weight: bold;
font-size: 14px;
font-family: "Trebuchet MS", verdana;
}

.newsbottom
{
border-width: 1px;
border-color: #C1C1C1 #C1C1C1 #C1C1C1 #C1C1C1;
border-style: solid;
color: #000;
background-color: #E8E4E8;
}

#content
{
margin-left: 195px;
}

Der 3D.png er en liten kube på 20x19px og topbg.png er på 340x23px (se under for hvordan den ser ut).

 

Merk at dette kun er deler av sidas kode og derfor kan noe se litt rart ut når det sees seperat. Som blant annet å kreve "margin-left: 195px;" ol. (for ikke kollidere med en venstrejustert bolk med diverse info.)

 

Får ingen klager fra w3s validator, men tar gjerne imot tips om eventuelle 'dumme' ting jeg har gjort eller lignende.

post-76-1126223973_thumb.jpg

Lenke til kommentar
endrebjo

endrebjo

Skrevet
Skrevet (endret)
Endre: det var ikke bra, skal prøve å komme med noe bedre når edruen møter meg.

Men det er et semantisk kaos, og hvor er egentlig docktype osv?

Hva er det som ikke er semantisk der da? (OK, tittelen kunn ha vært et hn-element)

Det var ikke meningen å lage en komplett side med doctype osv., derfor er f.eks den utelatt (var sent på kvelden og ville legge meg).

Endret av endrebjorsvik89
Lenke til kommentar
Amnio

Amnio

Skrevet
  • Forfatter
Skrevet (endret)

Han mente kanskje at dette var litt dårlig html: "<p class="dato">Torsdag 8. September 2005</dato>" En litt spesiell tag du hadde gående der. :)

 

Glemte å spørre om det når jeg kikka gjennom koden din tidligere, men hvorfor brukte du "div#nyheter" i stedet for bare "#nyheter"? Har jeg rett i at dette kun styrer divs av typen "nyheter"?

 

Edit: En annen feil i koden din er at ved å legge til to eller flere nyheter får du problemer med bruken av id og class. Id "nyheter" og "content" vil allerede være definert.

Endret av Amnio
Lenke til kommentar
endrebjo

endrebjo

Skrevet
Skrevet
Han mente kanskje at dette var litt dårlig html: "<p class="dato">Torsdag 8. September 2005</dato>" En litt spesiell tag du hadde gående der. :)

En liten skriveleif der gitt. :blush:

 

Glemte å spørre om det når jeg kikka gjennom koden din tidligere, men hvorfor brukte du "div#nyheter" i stedet for bare "#nyheter"? Har jeg rett i at dette kun styrer divs av typen "nyheter"?

Ja. Så vidt jeg vet er det same shit, men jeg liker å skrive div også, bare for å lage litt oversikt. (synes det er lettere å få øye på 'div#...' enn '#...')

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...