css - Float left fejl i CSS - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css

Bruger #13753 @ 30.01.12 23:03

Hejsa allesammen!

Så er jeg i problemer igen!
Jeg kan simpelthen ikke få lov til at bruge "float:left;" i min style.css.
Jeg har følgende CSS-kode:

CSS kode

 #kolonner {
 width:1000px;
 height:auto;
 margin:0px auto 0px auto;
 padding:25px 0px 15px 0px;
 }
 
     .kolonne1 {
     width:310px;
     height:auto;
     padding:5px;
     background:#CCCCCC;
     float:left;
     margin-left:5px;
     }

Det skal lige siges, at "float" virker fint længere oppe i koden.
Og at jeg i min "index.php" trækker min header med følgende kode:

PHP kode

 <?php require ('header.php'); ?>

Det er der min #Frame starter.
Altså rammen for hele mit site.
#Frame ser desuden således ud

CSS kode

 #frame {
 background:#FFFFFF;
 width:1000px;
 height:auto;
 margin:0 auto 0 auto;
 }

Kan ikke se hvad der går galt der?
Og I kan også lige få index.php med

PHP kode

 <?php require ('header.php'); ?>
 <div id="clearfix"><!-- Clearfix! --></div>
 <?php require ('kolonner.php'); ?>
 
 </div>
 </body>
 </html>

I min header.php der starter alle de der <html> og <body> osv.
Er jeg bare for træt til at finde fejlen her?

5 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #13010 @ 30.01.12 23:43

440

Du mangler at vise din HTML kode hvor du bruger CSS koden.

Du kan lave et lille eksempel og give os et link.
PHP koden skal vi ikke bruge til noget.

Bruger #16802 @ 31.01.12 00:20

Du kan måske bruge det her:

HTML kode

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><title>1-1-3-1</title><link rel="stylesheet" href="stilark.css" type="text/css"></head>
 <body>
 <div class="side">
 <div class="logo"><h1>Overskrift eller logo</h1></div>
 <div class="menu">
 <ul class="menuliste">
 <li><a href="#">Forside</a></li>
 <li><a href="#">Side 2</a></li>
 <li><a href="#">Side 3</a></li>
 <li><a href="#">Side 4</a></li>
 <li><a href="#">Side 5</a></li>
 </ul>
 </div>
 <div class="venstrespalte"><p>Bokses højde tilpasses indholdet i dem. Og det giver et problem, når du har flere bokse ved siden af hinanden som her. De bliver nemlig ikke lige høje. Havde de haft samme baggrundsfarve ville det ikke kunne ses, men i dette tilfælde er det måske ikke så kønt.</p>
 <p>Se løsning i højre spalte.</p>
 </div>
 
 <div class="indhold">
 
 <h2>Denne skabelon ligger i mappen 1-1-3-1</h2>
 
 <h3 style="text-decoration: underline; margin-bottom:5px;">Beskrivelse:</h3>
 <p>Du får her et layout med en boks til en overskrift eller et logo, en boks med en vandret menu, tre spalter og en sidefod. Det hele er pakket ind i en boks med en fast bredde på 770 pixels, der er midterstillet på siden.</p>
 
 <h3 style="text-decoration: underline; margin-bottom:5px;">Boksene:</h3>
 <p>Skabelonen består af syv bokse:<br>
 Boksen <span class="fed">side</span> er en midterstillet boks, der indeholder de seks andre bokse. Hvis du ændrer bredden på boksen, så husk også at ændre bredden på boksene <span class="fed">logo</span>, <span class="fed">menu</span> og <span class="fed">sidefod</span>, så de får samme bredde. Boksene <span class="fed">venstrespalte</span>, <span class="fed">indhold</span> og <span class="fed">hoejrespalte</span> skal sammenlagt have samme bredde som boksen <span class="fed">side</span>.</p>
 
 <p>Boksen <span class="fed">logo</span> er beregnet til en overskrift eller et logo.</p>
 
 <p>Boksen <span class="fed">menu</span> indeholder en vandret menu.</p>
 
 <p>Boksen <span class="fed">venstrespalte</span> er boksen til venstre herfor.</p>
 
 <p>Boksen <span class="fed">indhold</span> er denne boks.</p>
 
 <p>Boksen <span class="fed">hoejrespalte</span> er boksen til højre herfor.</p>
 
 <p>Boksen <span class="fed">sidefod</span> kan fx bruges til at skrive navn og adresse. Jeg har valgt at centrere tekst i boksen, men det kan du selvfølgelig sagtens ændre i stilklassen <span class="fed">sidefod</span> med css-editoren.</p>
 
 <p>Du kan ændre baggrundsfarve og andre egenskaber på de syv bokse ved at tilrette deres stilklasser i KompoZers css-editor. Baggrundsfarven uden for boksene fastsættes i stilen <span class="fed">body</span>. </p>
 
 <p>Baggrundsfarven på menuen fastsættes i stilen <span class="fed">ul.menuliste li</span>, mens baggrundsfarven, når musemarkøren holdes over et menupunkt fastsættes i stilen <span class="fed">ul.menuliste li a:hover</span>. Du ændrer linkene ved at dobbeltklikke på dem og angive den ønskede linkadresse. Vil du have flere eller færre link på menulinjen, skal du ændre stilen <span class="fed">ul.menuliste li</span>, så den samlede boksbredde giver 100%. I øjeblikket er der fem menupunkter, så der er angivet en boksbredde på 20% for de enkelte punkter, vil du kun have fire menupunkter, skal du ændre til 25%, mens du ved seks menupunkter skal ændre til 16.67. Bemærk, at der bruges amerikansk decimaladskiller, det skal altså ikke være et komma, men et punktum mellem 16 og 67.</p>
 
 <h3 style="text-decoration: underline; margin-bottom:5px;">Ekstra stilklasser<br></h3>
 
 <p>Jeg har lavet nogle ekstra stilklasser, som du måske kan bruge, og ellers kan du selvfølgelig bare slette dem i css-editoren:</p>
 
 <p>Stilklassen <span class="fed">fed</span> gør en tekst <span class="fed">fed</span> og farver den samtidig mørkegrå. Stilklassen <span class="fed">roed</span> farver en tekst <span class="roed">rød</span>. Stilklassen <span class="fed">centrer</span> midterstiller teksten i et tekstafsnit på siden.</p>
 
 <p><img class="billedvenstre" style="width: 50px; height: 38px;" alt="" src="sparky.png">Stilklassen <span class="fed">billedvenstre</span> kan bruges til at placere et billede til venstre, mens teksten vil flyde uden om til højre herfor. Den kan også bruges på andre elementer end billeder.</p>
 
 <p><img class="billedhoejre" style="width: 50px; height: 38px;" alt="" src="sparky.png">Stilklassen <span class="fed">billedhoejre</span> kan bruges til at placere et billede til hoejre, mens teksten vil flyde uden om til venstre herfor. Den kan også bruges på andre elementer end billeder.</p>
 
 <p><span class="fed">OBS!</span> Når du skriver tekst, så husk at vælge <span class="fed">Afsnit</span> i rullemenuen i formateringslinjen. Ellers vil du ikke få indsat afstand mellem tekst og bokskanter. Her kan du se et lille eksempel på en tekst, hvor der ikke er valgt tekstafsnit:</p>
 
 Denne tekst går helt ud til kanten, fordi der ikke er valgt <span class="fed">Afsnit</span> i rullemenuen. Der er flere andre gode grund til at benytte tekstafsnit: Du får fx automatisk indsat mellemrum mellem afsnit, og det er nemmere at ændre egenskaber på teksten.
 <br><br>
 <p>P.S. Husk at ændre sidens titel til noget mere passende (menupunktet <span class="fed">Formater</span> => <span class="fed">Sidens titel og egenskaber</span> => udfyld feltet <span class="fed">Titel</span>). </p>
 
 <h2 class="centrer"><a href="../index.php#skabeloner">Tilbage til skabelonoversigten</a></h2></div>
 
 
 <div class="hoejrespalte"><p>En løsning på problemet med de forskellige spaltehøjder kan være at lave et billede, der fx er 5 pixels i højden, og som fylder 770 pixels i bredden. Billedet skal så have baggrundsfarven i den første spalte på de første 200 pixels, indholdsboksens farve på de næste 370 pixels og baggrundsfarven i denne spalte på de sidste 200 pixels. Prøv at tjekke billedet <span class="fed">spaltetrick.png</span>, som ligger i denne skabelons mappe.</p>
 
 <p>Vælger du andre bredder på boksene, skal billedet selvfølgelig benytte de valgte bredder.</p>
 
 <p>Du kan prøve at vælge <span class="fed">spaltetrick.png</span> som baggrundsbillede på stilklassen <span class="fed">side</span>, så du kan se effekten.</p>
 
 
 
 
 </div>
 <div class="sidefod">Navn, adresse og kontaktinformationer</div>
 </div>
 </body></html>

CSS kode

 /* Generated by KompoZer */
 
 * {
   padding:0;
   margin:0;
   }
 body {
   text-align: center;
   background-color: #eaeaea;
   }
 p, h1, h2, h3, h4, h5, h6, ul, ol, table { 
   margin-bottom:20px;
   padding-left:10px;
   padding-right:10px;
   }
 .side {
   margin-left: auto;
   margin-right: auto;
   position: relative;
   margin-top: 5px;
   text-align: left;
   width: 770px;
   background-color: white;
   }
 .logo {
   height: 75px;
   text-align: center;
   width: 770px;
   position: relative;
   background-color: #9999ff;
   font-size: 150%;
   }
 .menu {
   width:770px;
   }
 ul.menuliste {
   margin: 0;
   padding: 0 0 0 0px;
   list-style-type: none;
   height: 25px;
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-width: 1px;
   border-bottom-width: 1px;
   }
 ul.menuliste li {
   margin: 0;
   padding: 0;
   text-align: center;
   display: block;
   list-style-type: none;
   float: left;
   font-size: 120%;
   height: 25px;
   background-color: #7e9ce8;
   width: 20%;
   }
 ul.menuliste li a {
   text-decoration: none;
   color: black;
   display: block;
   height: 25px;
   }
 ul.menuliste li a:hover {
   height: 25px;
   background-color: #6b84c5;
   }
 .venstrespalte {
   float: left;
   width: 200px;
   background-color: #dca537;
   }
 .indhold {
   position: relative;
   width: 370px;
   background-color: white;
   float: left;
   }
 .hoejrespalte {
   float: left;
   width: 200px;
   position: relative;
   background-color: #dca537;
   }
 .sidefod {
   padding: 0px;
   position: relative;
   width: 770px;
   text-align: center;
   clear: both;
   background-color: #9999ff;
   }
 .fed {
   font-weight: bold;
   color: #2f2f2f;
   }
 .roed {
   color: red;
   }
 .billedhoejre {
   padding: 5px;
   float: right;
   }
 .billedvenstre {
   padding: 5px;
   float: left;
   }
 .centrer {
   text-align:center;
   }

Der bliver brugt float left og right..

Indlæg senest redigeret d. 31.01.2012 00:24 af Bruger #16802

Bruger #17015 @ 31.01.12 01:15

614

kolonner.php ville være rar at se hvis vi skal kunne sige noget fornuftigt. Et live eksempel ville være endnu mere optimalt.

Forøvrigt, så skal id-referencer på tags bruges som unik identifikation. Et clearfix skal være en klasse og ikke et id. ID = 1 element. Class = flere elementer.

Bruger #17000 @ 02.02.12 10:33

Hvis du viser siden så er det meget nemmere at hjælpe

Bruger #7032 @ 02.02.12 11:11

Det vil hjælpe med et live eksempel, så jeg kan se hvordan browseren tolker HTML og CSS koden via Chrome eller Firefox med Firebug.

Float left fejl i CSS

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler