Spørsmål om HTML/CSS!

maXini · 29. november 2011

Hallo,

Jeg har et lite spørsmål angående HTML/CSS. Jeg driver og designer et nettside som ligner veldig mye på dette:

http://i.imgur.com/oOdoK.png

Jeg har et lite problem, og det er at content boksen ikke holder seg i midten. Hver gang jeg zoomer ut går denne boksen mot venstre. Holder seg ikke i midten. Foreløpig ser koden ut sånn:

HTML:
<body>
    <div id="main_box">
            <header>......</header>
            <section id="content">
                 <article>
                      <h2>Tittel</h2>
                      <p>Tekst</p>
                 </article>
            </section>
    </div>
</body>

CSS:
#main_box{
margin: 0 auto;
text-align: left;
}

#content{
background-color: white;
border-radius:5px;
height: 600px;
width: 960px;
position: relative;
left: 14%;
margin: 0px 0px 20px 0px;
}

Dette funker ikke helt, hver gang jeg zoomer ut går tekstene mot venstre. I tillegg til det må jeg scrolle horisontalt pga denne content boksen. Jeg er ganske ny i HTML/CSS, og lurer på om noen av dere kunne hjelpe meg?

Jeg har prøvd position: absolute, men det ødelegger for footer. Footer hopper opp bare. Float funket veldig dårlig, får den ikke plassert i sentrum

Og et siste ting, hvordan kan jeg få footer til å holde seg på bunnen av siden hele tiden uansett hvor mye jeg zoomer ut? *Flytter seg opp og etterlater et stort tomrom når jeg zoomer ut*

Sånn ser footer CSS ut:

#the_footer{
clear:both;
  	text-align:center;
  	padding:20px;
  	background:#A1C820;
  	color: #e9e9e9;
  	/*border-radius: 10px;*/
  	border-top: 5px solid #000000;

}

Endret 29. november 2011 av maXini

frodrikk · 3. desember 2011

Jeg ville egentlig ha skrevet om selve html-en også, den var ikke så lett å skjønne seg på

Det jeg pleier å gjøre er å feks. la bodyen være den som skalerer, men at den har min og maks bredde, denne kunne ha vært en annen div også, men hvis man kan bruke body så slipper man unna med en div mindre

HTML: (Tok meg den frihet til å legge på en footer her da jeg ikke så den i innlegget ditt)

<body>
<header>Header</header>
            <div id="content">
                 <article>
                      <h2>Tittel</h2>
                      <p>Tekst</p>
                 </article>
            </div>
<footer>Footer</footer>
</body>

CSS:

body {
min-width: 400px;
max-width: 700px;
height:500px;
margin-left:auto;
margin-right:auto;
}

header {
text-align:center;
}
#content{
       border:1px solid black;
       border-radius:5px;
       text-align:center;
}
footer{
       clear:both;
       text-align:center;
       padding:20px;
       background:#A1C820;
       color: #e9e9e9;
       /*border-radius: 10px;*/
       border-top: 5px solid #000000;

}

PS: Den borden jeg har lagt på er kun for å vise deg layouten og hvordan boksene er i forhold til hverandre, det kan være lurt når

man legger opp designet ettersom det blir enklere å se hvorfor det ikke fungerer

Endret 3. desember 2011 av frodrikk

Logg inn

Spørsmål om HTML/CSS!

Anbefalte innlegg

maXini

Lenke til kommentar

Videoannonse

frodrikk

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer