Mangler plads mellem divs?
Godaften.
I forbindelse med min uddanelse er jeg ved at lave mit første design i css/divs.
Jeg har fået lavet alle delene i designet, og de sidder næsten rigtigt.
Et billede:
Link
Ud fra de mål jeg har givet de forskellige dele, vil jeg mene at der bør være 20px fra faktaboksen/contentboksen og ud til sidemenuen, men det er der tydeligvis ikke.
default.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href="default.htm">
<img src="logo.png" id="logo_pic"/>
</a>
</div>
<div id="menu">
<a href="default.htm">Hjem</a> •
<a href="projekter.htm">Projekter</a> •
<a href="grafik.htm">Grafik</a> •
<a href="cv.htm">CV</a>
</div>
<div id="fact">
<div id="fact_left">
Fakta: <span class="fact_font">Tekst her</span><br />
Fakta: <span class="fact_font">Tekst her</span><br />
Fakta: <span class="fact_font">Tekst her</span><br />
</div>
<div id="fact_right">
Fakta: <span class="fact_font">Tekst her</span><br />
Fakta: <span class="fact_font">Tekst her</span><br />
Fakta: <span class="fact_font">Tekst her</span><br />
</div>
</div>
<div id="roll">
Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />
Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />
Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />
Link<br />Link<br />Link<br />Link<br />Link<br />Link<br />
</div>
<div id="content">
Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />
Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />
Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />
Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />Indhold<br />
</div>
</div>
</body>
</html>
style.css (med det mest relevante)
body
{
background:url(bg.jpg);
font-family:Verdana, Sans-Serif;
font-size:16px;
color:#000000;
background-attachment:fixed;
}
#wrapper
{
width:980px;
margin-right:auto;
margin-left:auto;
}
#logo
{
width:980px;
height:150px;
padding:0px 430px 0px 150px;
}
#logo_pic
{
border:none;
}
#menu
{
width:980px;
height:30px;
padding:0px 220px 0px 0px;
}
#fact
{
width:760px;
border:solid 1px;
background-color:#f9f9f9;
background-image:url(top_pic.png);
background-repeat:repeat-x;
padding:30px 5px 30px 5px;
float:left;
}
#fact_left
{
float:left;
}
#fact_right
{
float:right;
}
.fact_font
{
font-weight:bold;
}
#roll
{
border:solid 1px;
width:200px;
background-color:#f9f9f9;
background-image:url(top_pic.png);
background-repeat:repeat-x;
float:right;
}
#content
{
border:solid 1px;
width:760px;
background-color:#f9f9f9;
background-image:url(top_pic.png);
background-repeat:repeat-x;
padding:30px 5px 30px 5px;
float:left;
}
Nogen der kan se problemet?
Derudover har jeg et par ting jeg gerne vil have ændret. Jeg vil gerne have at der ligeså er 20px mellem faktaboksen og contentboksen. Hvordan gør jeg det?
Og så vil jeg også gerne have at min topmenu bliver rykket over, så højre kant af det sidste link (CV), flugter med højre kant af content boksen.
Håber nogen kan hjælpe mig med et eller flere af mine problemer.
Mvh
Kristoffer Sidst redigeret 21:59 02/09/2010 Pointfordeling
Forfatteren har lukket tråden og har valgt at fordele de 50 point således:
|
Oprettet af:
CSS
Point afsat: 50
 Lukket |
|
prøv at lav noget margin-top: 20px; på din content :) |
Oprettet af:
MikL
Accepteret svar Point modtaget: 50 |
|
Det var så første problem løst, mange tak! :-) |
Oprettet af:
Kommentar |
Hvis jeg sætter
padding:30px 5px 30px 5px
på sidemenuen, vil den slet ikke være ved siden af faktaboksen.. Padding bør da kun ændre noget på indersiden, right?
Nå, nogen der kan se hvorfor der ikke er 20px mellem fakta og sidemenu? |
Oprettet af:
Kommentar |
|
doctype, position. Ellers kigger jeg lige senere ;-) |
Oprettet af:
Kommentar |
Du skal være oprettet og logget ind for at svare på en tråd
