webForumDet fria alternativet
Logga in / Bli medlem

Få alla DIV's i center?

HTML & CSS

15 svar · 774 visningar · startad av omax

omaxMedlem sedan nov. 2004112 inlägg
Frågan#1

style.css

<STYLE TYPE="text/css">
<!--

img { border:0; }

body {

	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#3e3e3e;
	background-color:#FFFFFF;
	align:center;
}

a {color: #ff0000; } /* Orange */
a:HOVER {color:#FFF; } /* White */

/* H1, H2, H3 osv */

h1, h2 {
	font-family:Arial, Helvetica, sans-serif;
	color: #225D9F;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
	margin-bottom: 15px;
	padding: 0;
	position: relative;
}

h2 { font-size: 115%; padding: 0 150px 0 0; }
h2 span, h3 span { position: absolute; right: 0; color: #BFC1C8; }
h3 { font-size: 105%; }

#layout-01 {
	position:absolute;
	left:10px;
	top:0px;
	width:996px;
	height:89px;
	background-color:#B6B696;
}

#layout-02 {
	position:absolute;
	left:10px;
	top:89px;
	width:997px;
	height:19px;
	background-image: url(images/menu.gif);
}

#layout-03 {
	position:absolute;
	left:10px;
	top:108px;
	width:997px;
	height:5px;
}

#layout-04 {
	position:absolute;
	left:10px;
	top:113px;
	width:807px;
	height:355px;
	background-image: url(images/main.gif);
}

#layout-05 {
	position:absolute;
	left:0px;
	top:113px;
	width:2px;
	height:355px;
	
}

#layout-06 {
	position:absolute;
	left:819px;
	top:113px;
	width:188px;
	height:627px;
	background-color:#FFFFFF;
	padding:10px;
	
}

#layout-07 {
	position:absolute;
	left:10px;
	top:468px;
	width:807px;
	height:28px;
	background-color:#BBBD9B;
	valign:middle;
	
}

#layout-08 {
	position:absolute;
	left:818px;
	top:468px;
	width:1px;
	height:280px;
	
}

#layout-09 {
	position:absolute;
	left:10px;
	top:496px;
	width:808px;
	height:6px;
	
}

#layout-10 {
	position:absolute;
	left:10px;
	top:502px;
	width:296px;
	height:236px;
	background-color:#FFFFFF;
	padding:10px;
	
}

#layout-11 {
	position:absolute;
	left:306px;
	top:502px;
	width:6px;
	height:246px;
	
}

#layout-12 {
	position:absolute;
	left:312px;
	top:502px;
	width:499px;
	height:238px;
	background-color:#FFFFFF;
	padding:10px;
	
}

#layout-13 {
	position:absolute;
	left:811px;
	top:502px;
	width:7px;
	height:246px;
	
}

#layout-14 {
	position:absolute;
	left:10px;
	top:738px;
	width:296px;
	height:10px;
	
}

#layout-15 {
	position:absolute;
	left:312px;
	top:740px;
	width:499px;
	height:8px;
	
}

#layout-16 {
	position:absolute;
	left:819px;
	top:740px;
	width:188px;
	height:8px;
	
}

#layout-17 {
	position:absolute;
	left:10px;
	top:748px;
	width:996px;
	height:82px;
	background-color:#FFFFFF;
	
}

#layout-18 {
	position:absolute;
	left:1006px;
	top:748px;
	width:1px;
	height:82px;
	background-color:#FFFFFF;
}

-->
</STYLE>

index.php

<HTML>
<HEAD>
<TITLE>Expise Productions</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" />
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ID="layout-01"> <!-- Top -->
	<h1>Expise Productions</h1></DIV>
<DIV ID="layout-02"> <!-- Meny -->
<?php include 'menu.php'; ?></DIV>
<DIV ID="layout-03">
	<IMG SRC="images/menu_bottom.gif" WIDTH="997" HEIGHT="5"></DIV>
<DIV ID="layout-04">
</DIV>
<DIV ID="layout-05">
	<IMG SRC="images/line.gif" WIDTH="2" HEIGHT="355"></DIV>
<DIV ID="layout-06" padding="10"> <!-- Textruta höger -->
<h2>Welcome</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eleifend rhoncus mauris. Vestibulum nisl. 

Mauris non ante. Sed pulvinar. Curabitur suscipit molestie nibh. Sed dignissim metus ut neque. Phasellus 

feugiat nisi in tortor. Nunc quis nulla. Ut magna. Aenean auctor mi id augue. Praesent at tortor. Class 

aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam euismod, ante 

eget eleifend eleifend, leo diam sagittis metus, nec elementum dui sem scelerisque nulla. Etiam et est vitae 

metus convallis venenatis. Etiam condimentum, elit eget molestie malesuada, elit lectus dapibus diam, sit 

amet rutrum mauris neque vel lectus. Nam eu neque ac ligula porttitor aliquam. <br><br>

Etiam interdum. Aenean et mauris vitae ligula cursus aliquam. Cras eget sem. Phasellus felis. Pellentesque 

vitae erat vel sapien pharetra dignissim. Nam tincidunt pharetra justo. Morbi ullamcorper feugiat urna. 

Mauris arcu orci, mollis ac, rutrum nec, varius ac, nibh. Cras tristique, tellus at tincidunt posuere, est 

sapien sollicitudin purus, vel tristique diam justo eget ipsum. Fusce et ante. Curabitur dui justo, 

consectetuer vitae, mattis eget, gravida non, augue. Nam tristique. Nulla ut lectus. Praesent tincidunt. Sed 

egestas massa eget turpis. Nullam eu metus a eros faucibus lacinia. <br><br>

Maecenas dolor. Mauris fringilla neque mattis nibh. Vestibulum ante ipsum primis in faucibus orci luctus et 

ultrices posuere cubilia Curae; Nulla sodales.
</DIV>
<DIV ID="layout-07"> <!-- Liten ruta under bilden -->
<p align="right"><font color="#FFFFFF">Expise Productions - A secure future&nbsp;</font></p></DIV>
<DIV ID="layout-08">
	<IMG SRC="images/line2.gif" WIDTH="1" HEIGHT="280"></DIV>
<DIV ID="layout-09">
	<IMG SRC="images/line3.gif" WIDTH="808" HEIGHT="6"></DIV>
<DIV ID="layout-10"> <!-- Liten textruta vänster -->
<h2>News</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras lorem. Integer nec nisi. Morbi cursus neque a 

augue porta iaculis. Aenean auctor, arcu vel iaculis vestibulum, dui nulla egestas turpis, tempor malesuada 

eros risus ac nisi. Sed in ligula. Donec adipiscing justo at purus. Vestibulum ullamcorper hendrerit nulla. 

Quisque felis nunc, vestibulum quis, tempus quis, nonummy sit amet, massa. Morbi commodo interdum mi. Morbi 

libero massa, condimentum pulvinar, eleifend in, blandit non, pede. Integer dapibus. Aliquam erat volutpat. 

Duis id nisl. Vestibulum at quam. Curabitur non augue nec purus tempus egestas. Phasellus et urna. Vivamus 

id massa. Quisque felis. Sed. </DIV>
<DIV ID="layout-11">
	<IMG SRC="images/line4.gif" WIDTH="6" HEIGHT="246"></DIV>
<DIV ID="layout-12"> <!-- liten textruta höger -->
<h2>Topic</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas purus ipsum, pharetra id, bibendum id, 

egestas vestibulum, massa. Cras mattis purus at augue. Quisque ornare lectus vitae quam lobortis volutpat. 

Donec a sapien. Vivamus eget velit. Ut feugiat nisi. Suspendisse neque. Morbi rhoncus. Vivamus rhoncus arcu 

eu sapien. Nullam eu libero. Pellentesque elit purus, tincidunt vel, pretium vel, molestie vel, mi. Fusce 

sed neque. Vivamus pellentesque luctus tellus. Donec dui nisi, aliquam elementum, blandit ac, blandit 

pharetra, libero. Fusce dignissim sollicitudin ipsum. Donec odio augue, sodales in, viverra a, sollicitudin 

eget, urna. Donec eget nibh. Sed nunc neque, mattis vitae, semper eu, viverra malesuada, ipsum. Cras pede. 

Aliquam facilisis turpis ut tellus. Duis orci enim, sagittis et, auctor a, convallis id, diam. Maecenas 

velit pede, consequat vitae, lobortis ut, posuere in, sapien. Integer id nisi. Integer bibendum nibh id 

nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam a felis sed risus rhoncus bibendum. 

Nullam quam justo, placerat id, vehicula quis, dignissim in, massa. Pellentesque id purus. Phasellus sed 

mauris. Etiam vel eros quis lectus lobortis mattis. Donec ultrices convallis justo. Duis vitae nulla non 

justo tristique dapibus. Vivamus volutpat. Etiam accumsan urna id ante. Morbi orci lorem, pharetra. 
</DIV>
<DIV ID="layout-13">
	<IMG SRC="images/line5.gif" WIDTH="7" HEIGHT="246"></DIV>
<DIV ID="layout-14">
	<IMG SRC="images/line6.gif" WIDTH="296" HEIGHT="10"></DIV>
<DIV ID="layout-15">
	<IMG SRC="images/line7.gif" WIDTH="499" HEIGHT="8"></DIV>
<DIV ID="layout-16">
	<IMG SRC="images/line8.gif" WIDTH="188" HEIGHT="8"></DIV>
<DIV ID="layout-17"> <!-- bottom -->
	&nbsp;© Expise Productions <p align="right"><a href="about.php">About us</a> | <a 

href="legal.php">Legal</a></p></DIV>
<DIV ID="layout-18">
	</DIV>
</BODY>
</HTML>

Hur får jag alla DIV's att hamna i center på sidan?
align:center; i css body funkar inte.

echoSwes avatarechoSweMedlem sedan nov. 20041 189 inlägg
#2

Jag tänker inte sitta och pilla ihop allt det där, så du får nog skicka en länk om du vill ha hjälp.
Sedan så rekommenderar jag inte ImageReadys export to htmlfeature, då den producerar sådan kod som man kan se ovan. Lär dig koda ordentligt istället. (ordentligt är inte menat som sarkastiskt, utan i stil med lite bättre riktlinjer)

zcorpanMedlem sedan dec. 20042 245 inlägg
#3

Hmm. Testa:

body {
	[b]position:relative;
	width:1000px; /* eller vilken bredd du nu vill ha */
	margin-left:auto;
	margin-right:auto;[/b]
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#3e3e3e;
	background-color:#FFFFFF;
	/*align:center;*/
}
frippzs avatarfrippzMedlem sedan okt. 200518 inlägg
#4

Så fort det kommer till positionering av olika slag med CSS så vänder jag mig alltid till denna template-sida.

http://intensivstation.ch/en/templates/

Lycka till!

omaxMedlem sedan nov. 2004112 inlägg
#5

Tack zkorpan! Precis vad jag behövde, funkar utmärkt! :D
Tack frippz också för den ypperliga informationskällan. Och echoSwe för att han var allmänt purken ;)

echoSwes avatarechoSweMedlem sedan nov. 20041 189 inlägg
#6

:)
Jag har själv suttit på det sättet du gör nu (?), men det var för att ingen talade om för mig att man inte byggde layouter på det sättet. Det var något jag själv fick fundera ut. Det tog en stund, så jag tänkte att jag skulle bespara dig illusionen att det är en bra teknik att använda position: absolute.

Det finns andra layoutetekniker också. I en två kolumnlayout: antingen flyter man båda block åt höger och vänster, eller så flyter man ett block och sätter margin på det andra. A list apart hade en halvbra artikel för nån vecka sen, men den rekommenderar jag inte. Har även skrivit en tutorial själv om du vill se den.

omaxMedlem sedan nov. 2004112 inlägg
#7

Den läser jag gärna, läser det mesta jag kommer över...
Men jag märkte först nu, att koden zkorpan visade inte fungerar i IE... Dumma M$

Så nu har jag fortfarande problem.

BTW. adressen till sidan är https://www.expise.frih.net/new/

Mozfans avatarMozfanMedlem sedan okt. 2005541 inlägg
#8

Tror inte att IE förstår vad som menas med "margin-left:auto;" och "margin-right:auto;" :) Så man måste komplettera med en "text-align:center" och sedan parera igen så att inte allt innehåll i div'arna också centreras.

Men kolla också din CSS:
* Line: 4
Parse error - Unrecognized : <STYLE TYPE="text/css"> <!-- img { border:0; }

\* Line: 56 Context : #layout-02
  Property text-valign doesn't exist : bottom

\* Line: 105 Context : #layout-07
  Property valign doesn't exist : middle

Och din HTML har också en del fel som bör fixas, t.ex. ingen Doctype vilket kan göra viss skillnad i hur sidan visas.

zcorpanMedlem sedan dec. 20042 245 inlägg
#9

IE6 blir lite snällare om du använder en doctype som triggar standards mode. Om du ändå vill jobba i quirks mode får du göra som Mozfan säger och trixa med text-align:center (ett felaktigt beteende i IE5 som lever kvar i IE6 i quirks mode). :)

echoSwes avatarechoSweMedlem sedan nov. 20041 189 inlägg
#10

Eftersom BBB bestämde sig för att ge mig dynamiskt IP så får du hålla tillgodo med källkoden till skolan. Det är bara att klistra in i ett htmldokument, eller ladda sidan som en usercontrol.

Här är även en sida som kan hjälpa dig:
http://css.maxdesign.com.au/selectutorial/index.htm

webdesign.rar (18 kB)
omaxMedlem sedan nov. 2004112 inlägg
#11

Tack för all information!

Men det var väl så att jag började fel med hela designen, så jag börjar om.
Denna gång utgår jag från en simpel CSS-layout.

https://www.expise.frih.net/new2/

Funderar runt lite på färger och så. Men jag har en liten fråga, har lite halft med CSS och göra. Men jag orkar inte starta en ny tråd.

Istället för att ändra varje sida om jag behöver ändra i menyn så använder jag mig av <? php include 'menu.php'; ?>

Men när jag gör detta så försvinner ju funktionen current. Men det vill jag fortfarande ha, går detta att lösa med JavaScript simplast?
Några andra förslag?

zcorpanMedlem sedan dec. 20042 245 inlägg
#12

Du kan göra tex såhär:

<body id="home"> 
...
<ul class="nav">
 <li><a href="#" class="home">Hem</a>
 <li><a href="#" class="projects">Projekt</a>
 ...
</ul>

#home .home, #projects .projects /* osv */ { font-weight:bold; }
omaxMedlem sedan nov. 2004112 inlägg
#13

Ok, men jag ändrade så att jag anänder sidan som en mall =)

<div id="menu">
<div id="menycontainer">
<menu>Menu</menu>
<ul id="meny">
    <li><a href="?do=start" id="current">.Home</a></li>
    <li><a href="?do=projects">.Projects</a></li>
    <li><a href="?do=downloads">.Downloads</a></li>
    <li><a href="?do=upload">.Upload files</a></li>
    <li><a href="?do=contact">.Contact</a></li>
	</ul>
</div>...

<div id="main">  
<?php
If (file_exists("".$_GET['do'].".php")) { //Kolla om filen $_GET['do'].php finns
	include("".$_GET['do'].".php"); //Om filen man beg&auml;r finns s&aring; kommer den att inkluderas
} else { //Annars jeflvar
	include("start.php"); //Inkluderas main.php (hoppas du vet hur man &auml;ndrar...)
}
?>

</div>

Skulle jag inte kunna skriva lite JavaScript i menyn någonstans, nu kan inte jag JavaScript så jättebra men det borde funka såhär:
if url=*do=projects
then a:current

^^
Helst att man löser det utan JavaScript eftersom jag inte gillar det. Endast ibland ;)

Skulle jag inte kunna skriva nåt som #projects
i projects.php

och sedan kollar menyn om det står på sidan, om det står. Så a:current, om inte, gör ingenting.

Hoppas ni förstår vad jag menar :)

zcorpanMedlem sedan dec. 20042 245 inlägg
#14

Du behöver inte javascript. Du behöver inte PHP. Du behöver inte id="current". Du behöver bara det jag skrev i förra inlägget. På "projekt-sidan" ser det ut såhär istället:

<body [b]id="projects"[/b]> 
...
<ul class="nav">
 <li><a href="#" class="home">Hem</a>
 <li><a href="#" class="projects">Projekt</a>
 ...
</ul>
omaxMedlem sedan nov. 2004112 inlägg
#15

<a href="#" ....

Ska fyrkanten vara där? Nu känner jag mig novis!
Hur känner menyn av att det står <body id="projects"> i "main"?

zcorpanMedlem sedan dec. 20042 245 inlägg
#16

omax skrev:

<a href="#" ....

Ska fyrkanten vara där?

Nej, jag brukar bara använda det för mina "dummy-länkar" i mina kodsnuttar. :)

omax skrev:

Hur känner menyn av att det står <body id="projects"> i "main"?

Du kan ju testa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>meny</title>
  <style type="text/css">
   #home .home, #projects .projects { font-weight:bold; }
  </style>
 </head>
 <body id="projects">
  <ul class="nav">
   <li><a href="./" class="home">Hem</a></li>
   <li><a href="?do=projects" class="projects">Projekt</a></li>
  </ul>
 </body>
</html>
265 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
130 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
129 ms — ändringar (db)