html - Float i FF - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #11553 @ 25.03.07 18:01

Jeg har denne side, jeg har lavet http://mullep.dk/index.php Den er 100% valid men der er bugs i FireFox når float bliver tilføjet. Prøv at se siden i IE, så står den som den skal.
Har nogen en idé til hvad dette kunne skyldes.

prøv at tilføj float: right; til #navigation og float: left; til #content
Hvis man er for doven til det kan du se denne side http://mullep.dk/index2.php og hvis du lige kigger på HTML Validation er der ingen ting, ikke en warning.

14 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #10113 @ 26.03.07 15:25

147

Ok, dit problem ser ud til at være at teksten og menuen ikke kommer ind i borderen når du insætter float.

Ellers et fint, dejligt simpelt layout du har der;D

Prøv at ændre CSS filen til:

Kode

/* Main */
body {
	background-color: gray;
	color: black;
	font-size: 11px;
	font-family: Verdana, Arial, monospace;
	text-align: left;
}

/* Class */

.top {
	border-bottom: 1px dashed #B32608;
}
a.menu:link,a.menu:visited,a.menu:active {
	color: #B32608;
	background-color: #F2F2F2;
	text-decoration: none;
}
a.menu:hover {
	color: #0E85C9;
	text-decoration: none;
	background-color: #F2F2F2;
}

/* Identd */
#out {
	border: 40px solid #B32608;
	width: 1243px;
	background-color: #F2F2F2;
	color: black;
	margin: auto 0;
	text-align: left;
}
#content {
	text-align: left;
	background-color: #F2F2F2;
	width: 695px;
	color: black;
	padding: 5px 0px 5px 5px;
	float: left;
}
#navigation {
	text-align: left;
	background-color: #F2F2F2;
	width: 100px;
	color: black;
	padding: 5px 0px 5px 0px;
	float: right;
}

Og HTML filen til:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Temporary MulleP.dk 0.1 Version</title>


	
		
		<link href="index2_files/style2.css" rel="stylesheet" type="text/css"><!--[if IE]>
  			<link href="style-ie.css" rel="stylesheet" type="text/css" />
		<![endif]-->
		
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body>
			<div id="out">
				<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
posuere mattis libero. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent velit. Etiam et neque. Sed egestas laoreet
metus. Aliquam cursus pede nec risus. Ut metus ligula, aliquet vel,
venenatis et, pretium ac, enim. In nibh urna, consequat in, hendrerit
at, sodales a, leo. Vestibulum tempus mollis lacus. Proin sagittis
turpis ut leo. Donec eros erat, iaculis nec, ullamcorper sit amet,
pharetra in, justo. Ut mattis quam at leo. Quisque scelerisque volutpat
metus. Curabitur at dui et justo facilisis congue. Sed bibendum lacus
rutrum orci. Mauris congue odio id urna. In hac habitasse platea
dictumst. Morbi iaculis, urna at viverra malesuada, massa odio porta
augue, at pretium massa est placerat elit. Donec purus leo, facilisis
eu, interdum sit amet, accumsan vitae, tellus. Maecenas dolor nulla,
sagittis et, pretium vehicula, egestas sed, tortor.
In dictum quam in arcu. Nunc aliquam pede sit amet nibh. In vestibulum
bibendum est. Pellentesque quam arcu, mattis eget, vulputate rhoncus,
pellentesque non, sem. Phasellus magna orci, varius vitae, porta a,
ornare quis, dolor. Integer sodales, libero nec tincidunt fermentum,
dolor pede porttitor lorem, a pharetra lorem nulla in mi. Phasellus
quam mi, dictum in, feugiat vitae, pharetra eget, sapien. Duis volutpat
auctor pede. In euismod luctus est. Aenean volutpat venenatis enim.
Morbi sed nisi tempus ipsum tempus faucibus. Fusce sed lacus
consectetuer arcu dictum ultricies. Maecenas vestibulum.
Quisque tempus, quam eu vehicula feugiat, elit nisl dictum justo, ut
pretium dolor lacus sit amet magna. Nulla tincidunt, tellus volutpat
tempor molestie, purus arcu congue diam, vitae ornare magna arcu eu
est. Nunc vehicula, sapien eget consequat tincidunt, velit nibh cursus
lectus, a porta magna est nec turpis. Sed sit amet eros. Pellentesque
et risus tincidunt dolor sodales semper. Vestibulum libero. Fusce mi
nulla, molestie nec, nonummy quis, convallis ullamcorper, enim. Sed
vestibulum feugiat libero. Aliquam euismod aliquet nulla. Mauris sit
amet tortor. Aliquam est lacus, laoreet et, porttitor eu, euismod in,
massa. Aliquam risus nunc, semper nec, ullamcorper eget, pharetra
suscipit, tellus. Morbi ultrices. Nulla facilisi. Sed enim neque,
imperdiet quis, adipiscing in, porttitor eu, turpis. Vestibulum
feugiat. Maecenas sit amet sem. Proin non mauris quis dui lacinia
porta. Ut rhoncus facilisis velit. </div>
				<table id="navigation">
					<tbody><tr>
						<td class="top">Menu</td>
					</tr>
					<tr>
						<td> 
							<a href="http://mullep.dk/index2.php?side=fs" class="menu">Forside</a><br>
							<a href="http://mullep.dk/index2.php?side=bl" class="menu">Blog</a><br>
							<a href="http://mullep.dk/index2.php?side=ut" class="menu">Undertegnede</a><br>
							<a href="http://mullep.dk/index2.php?side=cv" class="menu">Mit CV</a><br>
							<a href="http://mullep.dk/index2.php?side=pf" class="menu">Portefølje</a><br>
							<a href="http://mullep.dk/index2.php?side=kt" class="menu">Kontakt</a><br>
							<a href="http://mullep.dk/index2.php?side=ls" class="menu">Links</a><br>
							<a href="http://mullep.dk/index2.php?side=gb" class="menu">Gæstebog</a>
						</td>
					</tr>
					<tr>
						<td>
							<p>
								<a href="http://validator.w3.org/check/referer"><img style="border: 0px none ;" src="index2_files/valid-xhtml10.png" alt="Valid XHTML 1.0!" height="31" width="88"></a>
								<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border: 0px none ; width: 88px; height: 31px;" src="index2_files/valid-css2.png" alt="Valid CSS 2!"></a>
							</p>
						</td>
					</tr>
				</tbody></table>
			</div>
		</div>
	</body></html>

Men jeg forstår ikke hvad du vil med den tabel?

Indlæg senest redigeret d. 26.03.2007 15:57 af Bruger #10113

Bruger #6953 @ 26.03.07 19:14

Nu skal jeg ikke bruge for meget tid på det, problemet med colapsing divs er nok det mest irriterende.

CSS koden

Kode

/* Main */
body {
	background-color: gray;
	color: black;
	font-size: 11px;
	font-family: Verdana, Arial, monospace;
	text-align: left;
}

/* Class */

#top {
	border-bottom: 1px dashed #B32608;width: 100px;font-weight: bold;
}
a.menu:link,a.menu:visited,a.menu:active {
	color: #B32608;
	background-color: #F2F2F2;
	text-decoration: none;
}
a.menu:hover {
	color: #0E85C9;
	text-decoration: none;
	background-color: #F2F2F2;
}

/* Identd */

#outline {
	width: 840px;
	background-color: #B32608;
	color: black;
	padding: 1px 0px 1px 0px;
	margin-left: auto;
	margin-right: auto;
}
#body {
	width: 800px;
	background-color: #F2F2F2;
	color: black;
	margin: 19px 20px 19px 20px;
	text-align: right;
}
#menu {text-align: left;width: 100px;margin-left: auto;margin-right: 0px;}
#content {
	text-align: left;
	background-color: #F2F2F2;
	width: 600px;
	color: black;
	padding: 5px 0px 5px 5px;
	float: left;
}
#navigation {
	text-align: left;
	background-color: #F2F2F2;
	width: 100px;
	color: black;

HTML koden

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Temporary MulleP.dk 0.1 Version</title>
    <link href="TEST.CSS" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  </head>
  <body>
    <div id="outline">
      <div id="body">
        <div id="content">Arbejder på mit CMS.</div>
      <div id="menu"><div id="top">Menu</div><br />
        <a href="?side=fs" class="menu">Forside</a><br />
        <a href="?side=bl" class="menu">Blog</a><br />
        <a href="?side=ut" class="menu">Undertegnede</a><br />
        <a href="?side=cv" class="menu">Mit CV</a><br />
        <a href="?side=pf" class="menu">Portefølje</a><br />
        <a href="?side=kt" class="menu">Kontakt</a><br />
        <a href="?side=ls" class="menu">Links</a><br />
        <a href="?side=gb" class="menu">Gæstebog</a><br /><br />
        <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mullep.dk"><img style="border:0px" src="valid-xhtml10.png" alt="Valid XHTML 1.0!" height="31" width="88" /></a><br />
        <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.mullep.dk&warning=1&profile=css3&usermedium=all"><img style="border:0px none;width:88px;height:31px;padding-top: 2px;" src="valid-css2.png" alt="Valid CSS 2!" /></a>
      </div>

      </div>
      </div>

 </body>
</html>

Som du kan se kan menuen også laves uden tabeller, det enste som jeg ikke kender løsningen på her, det er at selve den bottom-border du vil have, den laver 5-10px plads før menuen renderes, jeg hved ikke hvorfor men det er nu en meget god efekt (synes jeg selv)..

nu bruger jeg mest billeder til mine egne borders, men måske en anden kender løsningen på det problem, jeg har prøvet med "overflow: hidden;" det kunne jeg ikke helt få til at virke.

Bruger #4907 @ 28.03.07 22:44

Jeg er vist ikke med på, hvad du snakker om. overflow:hidden; virker i dette tilfælde - og har intet at gøre med baggrundsfarverne.

Men ærlig talt, så tror jeg heller ikke du forstår indholdet i den artikel, som du har linket til. Den opførsel Joseph er ude efter, kan opnås på flere forskellige måder. Det der står om i den artikel, som ikke er muligt, gælder kun når parent-elementet har fået "layout" (og det kan forresten gøres på andre måder end ved at angive en dimension) - og det kan man så arbejde udenom, omend det selvfølgelig ikke er optimalt. Men det er temmelig irrelevant ift. Josephs problem, og at misbruge tabeller til layout, hjælper på ingen måde på det andet problem.

Indlæg senest redigeret d. 28.03.2007 22:46 af Bruger #4907

Bruger #6953 @ 25.03.07 18:38

Du skal bruge margin-left: auto; og margin-right: auto; for at centrere content.

Problemet på index2 er at den "omringende div" kolapser grunden til det er at de divs inde i den er sat til "float: left/right;".

det er det mest hyppige problem på tabel fri layouts som bruger float, det kan helt udemærket lade sig gøre at lave table fri layouts; Men ønskes det bliver man enten nød til at begranse sig selv til bestemte designs, eller bruge "css hacks". Alternativt kunne man gå tilbage til tabeller som iøvrit vises præcis som ønsket i de fleste browsere.

Indlæg senest redigeret d. 25.03.2007 18:47 af Bruger #6953

Bruger #10113 @ 25.03.07 21:41

147

Alternativt kunne man gå tilbage til tabeller som iøvrit vises præcis som ønsket i de fleste browsere.

Jeg kan ikke lide at du nærmest andbefalder ham at bruge tabeller. Men det må du jo selv om.

CSS layouts er altid at foretrække, og flere og lfere store sider går over til det.

Bruger #11553 @ 26.03.07 05:46

Simon havde jeg skam heller ikke tænkt mig...

Jeg prøvet det med margins men hjalp ikke

Bruger #11429 @ 26.03.07 16:45

en lille fif ... :

fjern W3C valid. billederne

de ser dumme ud, og de passer ikke til sidens layout!

Bruger #10113 @ 26.03.07 18:06

147

en lille fif ... :

fjern W3C valid. billederne

de ser dumme ud, og de passer ikke til sidens layout!

Rigtigt, rigtigt. Men jeg mener at man kan finde dem i andre varitationen på w3c.org.

Ellers kan du tegner nogen selv som passer til dit layout. Vis altså du gerne vil beholde dem

Bruger #11553 @ 27.03.07 20:00

Brugte bare noget padding, Jacob.

Jeg kan bare ikke få siden til at blive i centrum uden at bruge align="center" hvilket giver en warning

Bruger #4907 @ 28.03.07 09:09

Sikkert fordi du har angivet #outline { margin:auto 0; } - hvilket svarer til #outline { margin-top:auto; margin-right:0; margin-bottom:auto; margin-left:0;} - i stedet for #outline { margin:0 auto;} !?

<< < 1 2 > >>

Float i FF

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler