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

CSS - Linjer och Marginaler!

1
Skriv svar
Permalänk
Medlem
●

CSS - Linjer och Marginaler!

Hejsan!
Hur fixar jag en sådan "kant" där jag kan lista nyheter till exempel?

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●
<div style="float: right; width: 150px; padding: 8px; border: 1px solid black;">
  Nyheter här :D
</div>
Själva sidinnehållet här
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av jetten: 
<div style="float: right; width: 150px; padding: 8px; border: 1px solid black;">
  Nyheter här :D
</div>
Själva sidinnehållet här
Gå till inlägget

Fungerar inte dessvärre...

Här är exemplet från hemsidan:

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

#sidebar h2, #sidebar h3, #sidebar h4 {
color: #000000;
}

#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;
}

Dold text

Hur går jag så att "sidebar" blir en enskild klass?

Detta är min egen HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<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>X</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 id="sidebar">
<h3>Sidebar</h3>

<ul id="Sidebar" class="clearfix">
<li><span class="sidebar">Jan 1</span> <a href="#">Text</a></li>
<li><span class="sidebar">Jan 2</span> <a href="#">Text</a></li>
<li><span class="sidebar">Jan 3</span> <a href="#">Text</a></li>
<li><span class="sidebar">Jan 4</span> <a href="#">Text</a></li>
</ul>

</div>

</body>

Dold text

SNÄLLA HJÄLP MIG!!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du har missat att lägga till float, som nämns i exemplet jetten gav dig. Det var den viktigaste biten, eftersom det är de som gör att du kan lägga två DIVs brevid varandra.

Du har även glömt att stänga din Container-div.

En liten grej att tänka på, men som kanske är gjord med flit?:
HTML 4.0.1 är på väg ut; rekommenderar att du byter till <!DOCTYPE HTML>, som är HTML5s doctype.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Vakz:

Du har missat att lägga till float, som nämns i exemplet jetten gav dig. Det var den viktigaste biten, eftersom det är de som gör att du kan lägga två DIVs brevid varandra.

Du har även glömt att stänga din Container-div.

En liten grej att tänka på, men som kanske är gjord med flit?:
HTML 4.0.1 är på väg ut; rekommenderar att du byter till <!DOCTYPE HTML>, som är HTML5s doctype.

Gå till inlägget

Hejsan, tack för hjälpen. Ändrat det och här ser du HTML filen, pysslar med CSS filen atm!

<!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 id="sidebar">
<div class="Hoger">

<h3>Text</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>

</body>
</html>

Dold text

Visst jag är en noob inom detta men alla måste börja någonstans...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett tips för att hitta saker man har missat är att köra sin HTML-kod igenom W3Cs validator. Här hittar du även deras CSS-validator, men stödet för CSS3 är lite halvdåligt, så om du använder något från CSS3 kan du ignorera en del varningar.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Vakz:

Ett tips för att hitta saker man har missat är att köra sin HTML-kod igenom W3Cs validator. Här hittar du även deras CSS-validator, men stödet för CSS3 är lite halvdåligt, så om du använder något från CSS3 kan du ignorera en del varningar.

Gå till inlägget

TACK

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