1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Lite problem med CSS divs.

Svara
2014-02-23, 01:27
  #1
Dreamstate
Medlem
Dreamstates avatar
Hej, hller p att lgga upp den grundlggande designen fr en sida och har lite problem med divs.

Jag hade tnkt mig ha en header som r centrerad p sidan, under den p vnster sida ska jag ha en navigation bar, dess vnstra kant ska vara alignad med vnstra kanten av headern och ligga 5px under headern.

Frsta frgan r, det smartaste borde vl vara att ha margin-bottom: 5px; i header, d detta ska glla bde nav-bar och content, men fr inte det att funka, vad r felet?

Min content-div hade jag tnkt anvnda som underlag fr sidoinnehll, men den kan jag inte ens f att visas.
Den ska ocks ligga 5px under headern och dess hgra sida br vara aligned med headerns hgra kant.
testade floats ett tag fr att f den att lgga sig till hger men den la sig alltid direkt under nav-bar och ville inte flytta sig.

Vad kan jag gra?

Hr r koden

HTML:

CSS:

Tack p frhand!
Citera
2014-02-23, 02:05
  #2
lasternassumma
Medlem
lasternassummas avatar
Har jag uppfattat rtt att du menar att navbaren ska
frsvinna utanfr vnsterkanten nr fnsterbredden
blir mindre n headerns bredd?

Utan att veta upplgget i vrigt skulle jag tro att
det r bra att lta navbaren synas, ven i ett smalt
fnster. T.ex. s hr:

HTML
Kod: 
<!DOCTYPE html>
<html>
<head>
<title>Sitenamn</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">

<div id="header">
</div>

<div id="navigationBar">
</div>

<div id="content">
</div>

</div>

</body>	
</html>

CSS
Kod: 
body{
background-color: #84acc1;
margin: 0;
}

#header{
background-color: #23a6ea;
float: left;
height: 100px;
width: 1000px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-top: 5px;
margin-left: 4px;
}

#navigationBar{
background-color: #74c1e9;
float: left;
width: 195px;
height: 600px;
margin-top: 5px;
margin-left: 4px;
}

#content{
background-color: #ffffff;
width: 800px;
max-height: 2000px;
margin-left: 5px;
margin-top: 105px;
}

mvh/Bo S
Citera
2014-02-23, 02:39
  #3
Bergsten
Medlem
Bergstens avatar
Du har en outnyttjad wrapper div i ditt html dokument, lr dig anvnda den
Sen har du bara max-height p din content css, drfr syns den inte.
max-height sger bara till din div att den inte kan ka mer i hjd n 2000px, detta r inte ndvndigt ifall den nd bara har en fast hjd.


Hr har du en css som fungerar, den utnyttjar ven din wrapper div.

CSS:
Kod: 
body{
background-color: #84acc1;
margin: 0;
}

#wrapper{
width:1000px;
height:100%;
position: fixed;
left: 50%;
margin-left: -500px;
}

#header{
background-color: #23a6ea;
height: 100px;
width: 100%;
margin-bottom: 5px;
}

#navigationBar{
float: left;
background-color: #74c1e9;
width: 195px;
height: 600px;
margin-right: 5px;
}

#content{
float: left;
background-color: #ffffff;
width: 800px;
height: 600px;
max-height: 2000px;
}
__________________
Senast redigerad av Bergsten 2014-02-23 kl. 02:51.
Citera
2014-02-23, 02:47
  #4
Dreamstate
Medlem
Dreamstates avatar
Citat:
Ursprungligen postat av lasternassumma
Har jag uppfattat rtt att du menar att navbaren ska
frsvinna utanfr vnsterkanten nr fnsterbredden
blir mindre n headerns bredd?

Utan att veta upplgget i vrigt skulle jag tro att
det r bra att lta navbaren synas, ven i ett smalt
fnster. T.ex. s hr:

Det dr var tyvrr inte som jag hade tnkt mig, ska frska frklara lite tydligare.
Allting ska vara centrerat i mitten av sidan.
Navbarens vnstra sida ska ligga jmnt med headerns vnstra kant.
content-divvens hgra sida ska ligga jmnt med headerns hgra kant.
Lyckades inte du heller f content-divven att visa sig?

Bde navbar och content ska allts passa in exakt undern headerns width.
Citera
2014-02-23, 02:52
  #5
Dreamstate
Medlem
Dreamstates avatar
Citat:
Ursprungligen postat av Bergsten
Du har en outnyttjad wrapper div i ditt html dokument, lr dig anvnda den
Sen har du bara satt max-height p din content css, drfr syns den inte.
Hr har du en css som fungerar, den utnyttjar ven din wrapper

Sja! det var exakt s jag menade.

vad brukar ni generellt lgga i era wrappers, jag frstr att de anvnds som en sorts container fr det grafiska grnssnittet i HTML-koden, men vad br den alltid anvndas till i CSS-filen?
Mnga stllen jag kollade p verkade sga att body funkade lika bra fr icke-specifika instllningar.

urskta om frgan r lite dum, brjade med HTML o CSS fr tv dagar sen bara.
Citera
2014-02-23, 03:02
  #6
Bergsten
Medlem
Bergstens avatar
Citat:
Ursprungligen postat av Dreamstate
Sja! det var exakt s jag menade.

vad brukar ni generellt lgga i era wrappers, jag frstr att de anvnds som en sorts container fr det grafiska grnssnittet i HTML-koden, men vad br den alltid anvndas till i CSS-filen?
Mnga stllen jag kollade p verkade sga att body funkade lika bra fr icke-specifika instllningar.

I detta fallet behvs inte en wrapper, men det underlttar en del d man bara behver stta sin storlek och position en gng. Om du vet att hemsidan kommer vara centrerad s knns det ondigt att hlla p att ange "mitten position" fr varje individuell div tag.

Finns nog ingen generell regel fr vad man brukar ha i sina wrappers, jag anvnder dem oftast fr att bunta ihop olika parti utav hemsidor.

Citat:
Ursprungligen postat av Dreamstate
urskta om frgan r lite dum, brjade med HTML o CSS fr tv dagar sen bara.
Finns inga dumma frgor, ingen brjar som proffs.
Hjlper grna till ifall du undrar ver ngot mer.
__________________
Senast redigerad av Bergsten 2014-02-23 kl. 03:06.
Citera
2014-02-25, 17:31
  #7
Barca2424
Medlem
Citat:
I detta fallet behvs inte en wrapper, men det underlttar en del d man bara behver stta sin storlek och position en gng. Om du vet att hemsidan kommer vara centrerad s knns det ondigt att hlla p att ange "mitten position" fr varje individuell div tag.


Om man inte ska ha vriga elementen exakt som i wrappern eftert, ska man anvnda
tex:

position: absolute;
left: 500px;

Fr att styra dom bst, dit man vill ha dom?
Citera
2014-02-26, 00:46
  #8
Bergsten
Medlem
Bergstens avatar
Citat:
Ursprungligen postat av Barca2424
Om man inte ska ha vriga elementen exakt som i wrappern eftert, ska man anvnda
tex:

position: absolute;
left: 500px;

Fr att styra dom bst, dit man vill ha dom?

position stter man efter sitt behov.

Problemet nr man endast stter left r att vnsterkanten hamnar p 500px i detta fallet, eftersom du heller inte vet vilken upplsning anvndarna har s kan element hamna fel, jag anvnder drfr % s mycket som mjligt.

Om du ser hur jag har gjort p wrappern s har jag flyttat elementet "left: 50%" (placerar vnsterkanten i mitten) och sedan dragit tillbaka halva elementets storlek t vnster med "margin-left" fr att f den centrerad. hoppas du frstr
__________________
Senast redigerad av Bergsten 2014-02-26 kl. 00:56.
Citera
2014-02-26, 06:07
  #9
Dreamstate
Medlem
Dreamstates avatar
Citat:
Ursprungligen postat av Bergsten
Om du ser hur jag har gjort p wrappern s har jag flyttat elementet "left: 50%" (placerar vnsterkanten i mitten) och sedan dragit tillbaka halva elementets storlek t vnster med "margin-left" fr att f den centrerad. hoppas du frstr

Detta r vldigt anvndbart har jag sjlv redan mrkt.
Citera
Svara

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in