Gå til innhold

Spørsmål om HTML/CSS!

maXini

Av maXini
i Programmering og webutvikling

Anbefalte innlegg

maXini

maXini

Skrevet
Skrevet (endret)

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 :p

 

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 av maXini
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
frodrikk

frodrikk

Skrevet
Skrevet (endret)

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 av frodrikk
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...