Verktyg Visningsval
2012-04-16, 01:13   #1

LORAMIGCSS

Medlem

Registrerad: apr 2012

CSS - Utrymme


Hejsan alla!
Behöver lite hjälp angående CSS och "brytning". Ni kan se denna URL:

http://www.freecsstemplates.org/preview/vertebrate/

Först följer - "Homepage", "Products", "About", "Contacts" (Menyn) sedan en svart-ljus skugga som följer.

DÄREFTER

Kommer ett visst utrymme och sedan en "Container".

Hur gör jag detta utrymme eller brytning?



HTML


Spoiler:
<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Hemsida</title>
</head>


<body>


<div id="container">

<div id="header">

<h1>X</h1>


<ul id="menu" class="clearfix">
<li><a href="#">Meny1</a></li>
<li><a href="#">Meny2</a></li>
<li><a href="#">Meny3</a></li>
<li><a href="#">Meny4</a></li>
</ul>

</div>


<div class="X" id="sidebar">

<h3>X</h3>

<p>Text</p>

<ul class="clearfix">
<li><span class="date">Jan 1</span> <a href="#">Text</a></li>
<li><span class="date">Jan 2</span> <a href="#">Text</a></li>
<li><span class="date">Jan 3</span> <a href="#">Text</a></li>
<li><span class="date">Jan 4</span> <a href="#">Text</a></li>
</ul>
</div>
</div>

</body>
</html>




CSS


Spoiler:
body {
margin-top: 60px;
padding: 0;
background: #101723;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;

}

#header h1 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
color: #4D4040;
text-align: center;
}

h1 {
font-size: 3.4em;
}


#container {
width: 600px;
padding: 45px;
background-color: #FFF;
margin: 0 auto;
border-radius: 8px;
}

#menu {
width: 45%;
margin: 0 auto;
margin-bottom: 20px;
padding: 0;
}


#menu li {
list-style: none;
float: left;
padding: 0x;
}


#menu li a:link, #menu li a:visited{
text-decoration: none;
padding: 10px;
display: block;
}

#menu li a:hover {
text-decoration: none;
background-color: #362B2F;
color: #FFF;
}


#menu a {
height: 56px;
margin: 0px;
padding: 10px 30px 10px 30px;
line-height: 56px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: normal;
color: #262626;
border: none;
}

#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 45px 35px 45px 35px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}


#sidebar ul {
list-style: none;
}

#sidebar ul li {
padding: 10px 0 10px 0;
border-top: solid 1px #D9D9D9;
}

#sidebar ul li.first {
border-top: 0;
padding-top: 0;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE */
/* @end */
LORAMIGCSS är inte uppkopplad
2012-04-16, 01:53   #2

LORAMIGCSS

Medlem

Registrerad: apr 2012

Ingen som kan hjälpa?
LORAMIGCSS är inte uppkopplad
2012-04-16, 02:17   #3

infinity08

Medlem

Plats: stockholm

Registrerad: aug 2008

Citat:
Ursprungligen inskrivet av LORAMIGCSS Visa inlägg
Hur gör jag detta utrymme eller brytning?
Vad är det du försöker uppnå? Tycker det ser bra ut. Vill du att content-diven ska hamna längre ner är det bara att ge den en margin-top.
infinity08 är inte uppkopplad
2012-04-16, 02:20   #4

LORAMIGCSS

Medlem

Registrerad: apr 2012

Citat:
Ursprungligen inskrivet av infinity08 Visa inlägg
Vad är det du försöker uppnå? Tycker det ser bra ut. Vill du att content-diven ska hamna längre ner är det bara att ge den en margin-top.

Hejsan!

Snälla kan du inte hjälpa mig?
Letar som en idiot på Google men hittar inte en sådan simpel sak...
Kan du inte bara fixa koden till en brtyning?

Margin-top: Xpx;

Tar bara större mellanrum emellan rubirken och menyn.
LORAMIGCSS är inte uppkopplad
2012-04-16, 02:32   #5

infinity08

Medlem

Plats: stockholm

Registrerad: aug 2008

Citat:
Ursprungligen inskrivet av LORAMIGCSS Visa inlägg
Hejsan!

Snälla kan du inte hjälpa mig?
Letar som en idiot på Google men hittar inte en sådan simpel sak...
Kan du inte bara fixa koden till en brtyning?

Margin-top: Xpx;

Tar bara större mellanrum emellan rubirken och menyn.
Förstår inte riktigt vad du menar med brytning då, om du inte menar avståndet mellan toppmenyn och innehållet?
infinity08 är inte uppkopplad
2012-04-16, 07:48   #6

havsmonstret

Medlem

havsmonstrets avatar

Plats: Linköping

Registrerad: apr 2010

margin-bottom på menyn? Du får nog ta o förklara lite bättre.
havsmonstret är inte uppkopplad Folding
2012-04-16, 08:29   #7

Florrpan

Medlem

Florrpans avatar

Plats: Sundsvall

Registrerad: dec 2006

Finns flera sätt att faktiskt göra utrymmen. I exemplet du visar så använder han sig bl.a av padding.

http://www.freecsstemplates.org/prev...te/default.css
__________________

i7 3770k | ASUS P8Z77-V PRO | 16B-RAM | Gainward GTX 570
Florrpan är uppkopplad nu
Senaste nyheterna

Redaktionens senaste nyhetsrubriker