Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Problem med Css box

1
Skriv svar
Permalänk
Medlem
●

Problem med Css box

Tja!, referera till bilden http://i.imgur.com/ZqBnbO1.png?1?4646

Som ni ser så är "header" boxen förskjuten samt "meny" bottomlinen går inte ända fram, någon som vet problemet?

Citat:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Neon </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">

</div>
<div id="meny">

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

<div id="footer">

</div>
</body>
</html>

CSS koden:

html{

}

body{

}

#header{
border: 3px solid black;
width: 800px;
height:200px;
margin: 0 auto;
padding: 0px;
border-bottom: none;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#meny{
border: 3px solid black;
width: 800px;
height:50px;
margin: 0 auto;
padding: 0px;
border-left: none;
border-right: none;
border-top: none;
}

#content{
border: 3px solid black;
width: 800px;
height:700px;
margin: 0 auto;
padding: 0px;
border-bottom: none;

}

#footer{
border: 3px solid black;
width: 800px;
height:50px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av stolle12:

Tja!, referera till bilden http://i.imgur.com/ZqBnbO1.png?1?4646

Som ni ser så är "header" boxen förskjuten samt "meny" bottomlinen går inte ända fram, någon som vet problemet?

Gå till inlägget

Du avslutar aldrig din div-meny-tagg, det kanske fixar problemet?

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
Permalänk
Medlem
●

tack mannen!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett litet tips. Istället för att speca bredd och centrering på varje element så kan du skapa en "wrapper" runt divarna. Du kan även använda HTML5-element istället för divar.

.wrapper {
    width: 800px;
    margin: 0 auto;
}
<div class="wrapper">
    <header id="header"></header>
    <nav id="meny"></nav>
    <main id="content"></main>
    <footer id="footer"></footer>
</div>

Alternativt kan du använda

<body class="wrapper">

som en wrapper och sätta klassen på den istället för en extra div.

Visa signatur

| i7 920 | UD5 | 6GB | 3TB | Intel SSD 80GB | Antec P182 |
http://webbutveckla.nu - Blogg om webbutveckling

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du kan byta ut dina divvar med ID till mina taggar jag visar nedan ocksa...

<div id="header">

</div>

<header></header>

<div id="meny">

<nav></nav>

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

<section><section>

<div id="footer">

<footer></footer>

I css:en Targetar du med tex "footer" istället för att ha ett ID. ID kan du ju lägga till om du ser sedan att du verkligen behöver det, annars är det ju onödigt.

Senast redigerat
Visa signatur

// Lian Li PC-888 // i7 4790s // MSI vega 56 8gb O.C. // 16GB //

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara