CSS Problem

2010-01-27 21:34

Permalänk

slachboy

Medlem

Plats: Umeå
Registrerad: Aug 2005

●

CSS Problem

Hej

Jag försöker få tillbaka mina kunskaper i CSS och använder dreamweaver. Det var 3 år sen jag höll på med det i gymnasiet, men nu är det dags igen .

Började med lite simpla saker men stött på problem redan ^^

koden ser ut så här.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Sida</title>
</head>

</body>
</html>

Problemet är att dom 3 bilderna lägger sig inte riktigt som jag vill, vill ha headern top och leftbar ska vara under den till vänster, och middle ska vara brevid den.
Men leftbar lägger sig längst upp och puttar headern 200px till höger.. Vill låsa dom så och även flytta allt till mitten av rutan, som jag antar är typ <body align="center"/> kanske?

Mvh / Slach

Visa signatur

In the absence of light, Darkness prevails

Rapportera Redigera

Citera flera Citera

2010-01-27 23:21

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Ser ut som att du skulle behöva ta dig en titt på css.
Försök att inte bygga layouten med tabeller så kommer du mycket längre.
Tex så använd floats för att positionera saker bredvid varandra och margin för att skapa mellanrum. Its all in the css.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-27 23:33

Permalänk

slachboy

Medlem

Plats: Umeå
Registrerad: Aug 2005

●

Jo det var som sagt bra länge sen
Skulle du kunna ge ett exempel på hur min kod skulle bli i float?

Visa signatur

In the absence of light, Darkness prevails

Rapportera Redigera

Citera flera Citera

2010-01-27 23:34

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

På mitt goda humör ikväll så du får två exempel inbakade i ett!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Sida</title>
<style>
.inline_position {
	float:left;
	display:inline;
}
.clear {
	clear:both;
}
/*För divar*/
#wrapper {
	width:600px;
	margin:0px auto;
}
#header {
	background-color:#06F;
	width:600px;
	height:200px;
	clear:both;
}
#leftbar {
	background-color:#396;
	float:left;
	display:inline;
	width:200px;
	height:400px;
}
#middle {
	background-color:#FC0;
	float:left;
	display:inline;
	width:400px;
	height:400px;
}
</style>
</head>

<body>
<div id="wrapper">
<img src="../Header-800-x-400.jpg" width="600" height="200" alt="header" class="clear" />
<img src="../Bar-200-x-800.jpg" width="200" height="400" alt="leftbar" class="inline_position" />
<img src="../Text-800-x-600.jpg" width="400" height="400" alt="middle" class="inline_position" />

<div class="clear"></div>

<div id="header"> </div>
<div id="leftbar"> </div>
<div id="middle"> </div>
</div>
</body>
</html>

Edit: Såg även att du vill placera allt i mitten, det gör du med en div som omsluter allt innehåll.

Senast redigerat 2010-01-27 23:42

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-27 23:48

Permalänk

slachboy

Medlem

Plats: Umeå
Registrerad: Aug 2005

●

Men jag får tacka så mkt, kände faktist igen lite av den översta kodningen. Ska ta och läsa på

Mvh Slach

Visa signatur

In the absence of light, Darkness prevails

Rapportera Redigera

Citera flera Citera

2010-01-27 23:52

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Citat:

Ursprungligen inskrivet av slachboy
Men jag får tacka så mkt, kände faktist igen lite av den översta kodningen. Ska ta och läsa på

Mvh Slach

Det låter bra det, använd w3 som källa och snart kommer You in och säger att du ska använda Webboken, vilket också är ett bra sätt att komma igång på.

När sidan sen blir större så kan det vara trevligt att länka in css:en så att du har möjlighet att använda samma stilmall på flera html-dokument. Då kan du skapa en fil som du kallar för namn.css, lägga all din stilmallskod i denna och länka in den innanför <head> så här:

<link href="stilmall.css" rel="stylesheet" type="text/css" media="screen" />

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-28 02:14

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Citat:

Ursprungligen inskrivet av save
Det låter bra det, använd w3 som källa och snart kommer You in och säger att du ska använda Webboken, vilket också är ett bra sätt att komma igång på.

Du hann före mig

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

CSS Problem

CSS Problem

Externa nyheter

Spelnyheter från FZ