CSS (div) problem.

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:
CSS (div) problem.

Indlæg af cristian » 24. sep 2013, 18:46

Så jeg er infrastruktur gut der mente at det var på tide at lære HTML og CSS fra grunden up,
med en Head First bog.

Dog er jeg løbet ind i et problem jeg umiddelbart ikke kan se mig ud af.

Jeg prøver i øjeblikket at strukturer hvordan siden skal se ud. Men kan ikke få navigations div'en til at sidde under min logo div.
Svaret er sikkert åbenlyst, men det har indtil videre undgået mig ,)

Da siden er forholdvis simpel har jeg placeret hele HTML samt CSS koden her.
Hvis der er nogle kommentar på åbenlyst ting, så sig endelig frem.

HTML

Kode: Vælg alt

<!doctype html>
<html>
    <head>
        
        <meta charset="UTF-8">
        
        <title>Welcome til min side</title>
        
        <link rel="stylesheet" type="text/css" href="style1.css"/>
        
    </head>
    
    <body>
        
        <div class="mainContainer">
            
            <div class="topContainer">
                
                <div class="logoContainer">
                    
                    <img src="images/logo.jpg" alt="Billedet kan ikke vises" height="100%" width="100%"/>
                    
                </div>
                
                <div class="headerContainer">
                    
                    <h1>Welcome to my site</h1>
                    
                </div>
                
            </div>
            
            <div class="centerContainer">
                
                <div class="contentContainerOne">
                
                    <p>Velkommen til min side <br />
                    Denne side er til test formål og indenholder ikke rigtig noget.

                    <!--Test for at se om nye linjer skubbede navigations diven under denne div-->
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    
                    </p>
                
                </div>
                
            </div>
            
            <div class="navigationContainer">
                
                <ul class="navigationOverview">
                        
                        <li>Home1</li>
                        <li>Something1</li>
                        <li>Something2</li>
                        <li>Something3</li>
                        
                    </ul>
                
            </div>
            
        </div>
        
    </body>
</html>
CSS

Kode: Vælg alt

root { 
    display: block;
}

/*This is a reset function*/
/** {
    padding: 0px;
    margin: 0px
}*/

/*Properties for my body.*/
body {
    background-color: aqua;
}

/*Style properties for the different container divs*/
.mainContainer {
    background-color: black;
    
    margin-left: 25%;
    margin-right: 25%;
    
    border-width:  2px;
    
    border-style: dashed;
    
    overflow: hidden;
}

.topContainer {
    
}

.logoContainer {
    background-color: brown;
    
    float: left;
    
    width: 160px;
    height: 211px;
}

.headerContainer {
    background-color: white;
    
    margin: auto;
}

.centerContainer {
    background-color: red;
    
    border-width:  2px;
    
    border-style: dashed;
    
    overflow: hidden;
}

.contentContainerOne {
    background-color: aquamarine;
    
    height: 100%;
    width: 100%;
}

.navigationContainer {
    background-color: blueviolet;
    
    width: 160px;
    
    float: left;
}

/*Style properties for other HTML elements*/
h1 {
    padding: 0px;
    margin: 0px;
}

p {
    padding: 0px;
    margin: 0px;
}

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: CSS (div) problem.

Indlæg af ThomasI » 25. sep 2013, 17:54

Det er sandsynligvis din liste der driller - de har det nemlig ofte med ikke at vil blive inden i den omkringliggende div.

Prøv at smid dette i dit stylesheet:

Kode: Vælg alt

ul {
   list-style-position: inside;
}
Dette er også en mulighed:

Kode: Vælg alt

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div
>


Hvis intet af det virker, så prøv at smide din kode ind i en online sandbox og send linket - så kan vi prøve at lege lidt med koden :)

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: CSS (div) problem.

Indlæg af ThomasI » 25. sep 2013, 17:54

Prøv evt. også at fjern din float på ul

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: CSS (div) problem.

Indlæg af cristian » 26. sep 2013, 10:24

Jeg kunne ikke lige få det til at virke.

Jeg prøvede at smide det ind i htmlsandbox.com som understående

Kode: Vælg alt

<!doctype html>
<html>
    <head>
        
        <meta charset="UTF-8">
        
        <title>Welcome til min side</title>
        
        <link rel="stylesheet" type="text/css" href="style1.css"/>
        
        <style type="text/css">
        body {
            background-color: aqua;
        }

        /*Style properties for the different container divs*/
        .mainContainer {
            background-color: black;
            
            margin-left: 25%;
            margin-right: 25%;
            
            border-width:  2px;
            
            border-style: dashed;
            
            overflow: hidden;
        }

        .topContainer {
            
        }
        
        .logoContainer {
            background-color: brown;
            
            float: left;
            
            width: 160px;
            height: 211px;
        }
        
        .headerContainer {
            background-color: white;
            
            margin: auto;
        }
        
        .centerContainer {
            background-color: red;
            
            border-width:  2px;
            
            border-style: dashed;
            
            overflow: hidden;
        }
        
        .contentContainerOne {
            background-color: aquamarine;
            
            height: 100%;
            width: 100%;
        }
        
        .navigationContainer {
            background-color: blueviolet;
            
            width: 160px;
            
            float: left;
        }
        
        .navigationOverview {
            background-color: red;
        }
        
        .navigationOverview  li{
            list-style-type: none;
        }
        
        /*Style properties for other HTML elements*/
        h1 {
            padding: 0px;
            margin: 0px;
        }
        
        p {
            padding: 0px;
            margin: 0px;
        }
        </style>
        
    </head>
    
    <body>
        
        <div class="mainContainer">
            
            <div class="topContainer">
                
                <div class="logoContainer">
                    
                    <img src="images/logo.jpg" alt="Billedet kan ikke vises" height="100%" width="100%"/>
                    
                </div>
                
                <div class="headerContainer">
                    
                    <h1>Welcome to my site</h1>
                    
                </div>
                
            </div>
            
            <div class="centerContainer">
                
                <div class="contentContainerOne">
                
                    <p>Velkommen til min side <br />
                    Denne side er til test formål og indenholder ikke rigtig noget                    
                    </p>
                
                </div>
                
            </div>
            
            <div class="navigationContainer">
                
                <ul class="navigationOverview">
                        
                        <li>Home1</li>
                        <li>Something1</li>
                        <li>Something2</li>
                        <li>Something3</li>
                        
                </ul>
                
            </div>
            
        </div>
        
    </body>
</html>
og der ses "problemet" også i view-your-code boxen nederst i venstre hjørne.

Hvis du har lyst til at kaste et blik på det ville det være super :)
Og eventuel fortælle mig hvad jeg gør "galt" ,)

Også denne måde med % er tydeligvis en forkert måde

Kode: Vælg alt

<img src="images/logo.jpg" alt="Billedet kan ikke vises" height="100%" width="100%"/>
Men hvis man gerne ville fylde en div ud med et billed. Uden at skrive det i pixels og uden at få størrelsen på diven med javascript eller noget.
Hvordan gør man det?

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg:1528
Tilmeldt:28. dec 2010, 10:49

Re: CSS (div) problem.

Indlæg af ThomasI » 29. sep 2013, 11:02

Hej Cristian,

Undskyld det sene svar! Flytter denne weekend så har lidt travlt..

Men er det ikke fordi du skal have smidt din navbar ind i <div class="topContainer"> istedet? Den ligger udenfor det hele...?

En browser læser jo siden oppe fra og ned, så når naven ligger dennederst kan de godt tro at den også skal placeres der nede...

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: CSS (div) problem.

Indlæg af cristian » 29. sep 2013, 11:59

ThomasI skrev:Hej Cristian,

Undskyld det sene svar! Flytter denne weekend så har lidt travlt..

Men er det ikke fordi du skal have smidt din navbar ind i <div class="topContainer"> istedet? Den ligger udenfor det hele...?

En browser læser jo siden oppe fra og ned, så når naven ligger dennederst kan de godt tro at den også skal placeres der nede...
Kender det.
Flytter selv her d. 14.

Uhmm det nok ikke helt forkert.... Lige nu prøver jeg at lære principperne i HTML og CSS.

Hvor jeg også har skaffet mig mnrb.dk ( [M]y[N]ew[R]andomlog.dk :lol: ) til samme formål.

Så jeg sætter mig og roder med det igen.

Tak for din input T ,)

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: CSS (div) problem.

Indlæg af Daniel » 29. sep 2013, 23:17

cristian skrev: Også denne måde med % er tydeligvis en forkert måde

Kode: Vælg alt

<img src="images/logo.jpg" alt="Billedet kan ikke vises" height="100%" width="100%"/>
Men hvis man gerne ville fylde en div ud med et billed. Uden at skrive det i pixels og uden at få størrelsen på diven med javascript eller noget.
Hvordan gør man det?
For at fylde en div (eller andet) helt ud med et billede, skal du benytte CSS i stedet for HTML. :)
Så din CSS kommer til at se sådan ud cirka.

Kode: Vælg alt

img {
   width: 100%;
   height: 100%;
}
Det er utroligt træls at det er opbygget sådan at HTML ikke kan bruge procent værdier, da de anbefaler i forholdt til sidens hastighed, at man altid angiver billedemål i HTML og CSS, men lige i dette tilfælde er det bedre kun at angive dem i CSS. :)

Ps. God fornøjelse med flytningen d. 14! :D
ThomasI skrev: Undskyld det sene svar! Flytter denne weekend så har lidt travlt..
God fornøjelse med flytningen til dig også Thomas! ;)

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: CSS (div) problem.

Indlæg af cristian » 30. sep 2013, 16:24

Tak Daniel.

Ja det fandt jeg ud af fra et svar du gav i en anden tråd.

Det er lidt åndsvagt efter min mening :) But hey. Life.

Besvar