webForumDet fria alternativet
Logga in / Bli medlem

Div-taggar. Hjälp en tabel knackare få till Div ?

HTML & CSS

8 svar · 1 362 visningar · startad av Mr T

Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
Frågan#1

Har en layout jag vill prova att göra en div-tagg sida av, istället för tabel som jag annars gärna använder.

Har ritat lite röda linjer hur jag tänkt dela in min layout. En "överdel" kallad "header" med logga och bild.
En meny rad där under.
Sedan kör det ihop sig............
Ska försöka dela upp sidorna på boken ett snyggt sätt.
Har försökt skapa en "topp" och "fot" av boken och sedan förenkla sidornas "blad". Helt enkelt göra en ram, men är det rätt sätt. Ska man kanske lägga boken i bakgrunden eller vad är bässta sättet ?

Skickar med lite "skitig" html code (Den funkar inte bra) och css kode.

tacksam för tipps och råd i tänkandet.

html filen :

<!-- start wrapper -->
<div id="wrapper">
	<!-- start frame -->
	<div id="frame">
		<!-- start header -->
		<div id="header">
			<div id="logo">
				<img src="images/loggo.jpg" alt="" height="212" width="475" border="0"/>
			</div>
			<div id="topimgright">
				<img src="images/top_img.gif" alt="" height="211" width="309" border="0"/>
			</div>
		</div>
		<!-- end (header) -->
		<!-- start menu -->
		<div id="menu">
			<ul>
				<li class="current_page"><a href="#">Hem</a></li>
				<li><a href="#">Om Saga</a></li>
				<li><a href="#">Kontakta Oss</a></li>
			</ul>
		</div>
		<!-- end (menu) -->
		<!-- start page -->
		<div id="page">
			<div id="booktop"></div>
			<div id="bookleft"></div>
			<!-- start book -->
			<div id="book">
				<!-- start leftside -->
				<div id="leftside">
					Text</div>
				<!-- end (leftside) -->
				<!-- start rightside -->
				<div id="rightside">
					<a href="#">länk 1</a><br/>
					<a href="#">länk 1</a><br/>
					<a href="#">länk 1</a><br/>
				</div>
				<!-- end (rightside) -->
			</div>
			<!-- end (book) -->
			<div id="bookbottom"></div>
		</div>
		<!-- end (page) -->
	</div>
	<!-- end (frame) -->
</div>
<!-- end (wrapper) -->

En css fil

  * {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/* ------ Wrapper ------ */
#wrapper {
	/* background: url(images/img08.gif) repeat-x left bottom; */
	background: #452300;
}

/* ------ Header ------ */

#header {
	height: 213px;
	background: #8F7859 url(images/top_bg.jpg) repeat-x left bottom;
}

/* Logo */

#logo {
	position: absolute;
	left: 0px;
	float: left;
}

/* topimgright */

#topimgright {
	position: absolute;
	right: 20px;
	float: left;
}

/* ------ Menu ------ */

#menu {
	height: 84px;
	background: #3D1C00 url(images/menu_bg.jpg) repeat-x left bottom;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: inline;
}

#menu a {
	color: #FCFDDF;
	float: left;
	height: 37px;
	padding: 13px 30px 0px 30px;
	font-size: 1.4em;
	font-weight: bold;
}

#menu a:hover {
	background: #333333;
	color: #FFFFFF;
}

#menu .current_page a {
	background: url(images/img04.gif) repeat-x;
}

#menu .inside_page a:hover {
	background: url(images/img04.gif) repeat-x;
}

/* ------ Frame ------ */

#frame {
	width: 1280px;
	margin: 0 auto;
	/* background: #452300 url(images/img06.gif); */
	background: #452300;
	text-align: center;
}

/* ------ Page ------ */

#page {
	width: 1280px;
	margin: 0 auto;
	/* background: #452300 url(images/img06.gif); */
	background: #452300;
	height: 600px;
}

/* Book */

#book {
	width: 980px;
	margin: 10px;
	height: 600px;
	/* background: #452300 url(images/img06.gif); */
	background: #917859;
}

#booktop {
	height: 54px;
	margin: 10px 0 0 11px;
	background: url(images/book_top.jpg) no-repeat left top;
}

#bookbottom {
	height: 54px;
	background: url(images/book_foot.jpg) no-repeat left bottom;
}

#bookleft {
	height: 604px;
	width: 46px;
	margin: 0px 0 0 10px;
	background: url(images/book_left_side.jpg) no-repeat left;
}

#leftside {
	float: left;
	width: 400px;
	height: 600px;
	min-height: 600px;
	padding: 50px 0px 0 60px;
}

#rightside {
	float: left;
	width: 400px;
	height: 600px;
	min-height: 600px;
	padding: 0 0 0 535px;
}

/* User */

#user {
	width: 250px;
	margin: 10 auto;
	background: #91785A;
}

#userimgtop {
	width: 217px;
	height: 7px;
	background: url(images/user_frame_top.jpg);
}

#userside {
	float: left;
	width: 400px;
	height: 600px;
	min-height: 600px;
	padding: 0 0 0 535px;
}

#userimgbottom {
	padding-bottom: 10px;
	width: 217px;
	height: 8px;
	background: url(images/user_frame_footer.jpg);
}
forsla.gif
rhdfMedlem sedan okt. 2007446 inlägg
#2

Du är på rätt väg, skulle jag säga
jag skulle dock klippt bilden lite kreativt och försökt använda så små bilder och så få div som möjligt

tex

<div id="wrapper">
<!-- Hela sidans wrapper-->
  <div id="header">Header</div>
  <div id="menu>Meny</div>
<!-- Sen det pilliga-->
<div id="page">
Denna innehåller boken
Se nedan
</div>
<div id="sidebar"></div>

Där har du ju sidans grundstruktur

Sen för att lösa själva boken på ett smidigt sätt så skapar du 4 divs i page

i pageLeft så sätter du den bild du nu har i bookleft
på så sätt slipper du försöka få 4 divs att ligga bredvid varandra

gör samma sak med page right

[I]<div id="page">[/I]
   <di
  <div id="pageLeft">
     
  <div id="pageRight>
  <div id="bookBottom">
[I]</div>[/I]

Jag kan slänga ihop ett mer komplett exempel straxt

För övrigt är det "dumt" att designa med 1280 som bredd
Det ser skitbra ut på din skärm, men fortfarande är 1024 sett som "standard"
en bra tumregel är därför att hålla sidan UNDER det i bredd, tex 960px

Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
#3

Ska tänka på det där med 1024. Bara blev så nu när bilden (som jag fick av en polare för övrigt) var i det formatet.

Det du föreslår är precis så jag vill ha det. Vad jag har svårt med är att få till sidorna och botten på boken att "fastna" på rätt ställe. Det är just hur styleshetten för "book_top_img", "book_left_img", "book_left_text", "book_center_img", "book_right_text", "book_right_img" och "book_bottom_img".

rhdfMedlem sedan okt. 2007446 inlägg
#4

jag slängde ihop en snabb version dock 960px bred, men principen är den samma, bara att ändra mått lite här o var

<div id="wrapper">
		<div id="header">
			<div id="logo">
				<img src="images/loggo.jpg" alt="" height="212" width="475" border="0"/>
			</div>
			<div id="topimgright">
				<img src="images/top_img.gif" alt="" height="211" width="309" border="0"/>
			</div>
		</div>
		<div id="menu">
			<ul>
				<li class="current_page"><a href="#">Hem</a></li>
				<li><a href="#">Om Saga</a></li>
				<li><a href="#">Kontakta Oss</a></li>
			</ul>
		</div>
		<div id="page">
			<div id="booktop">booktop</div>
			<div id="bookPages">
				<div id="leftPage">Vänstersida</div>
				<div id="rightPage">Högersida</div>
			</div>
			<div id="bookbottom">bookbottom</div>
		</div>
		<div id="sidebar">Sidebar</div>
</div>

/* http://meyerweb.com/eric/tools/css/reset/   v1.0 | 20080212  */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}/* remember to define focus styles!  */:focus{outline:0;}body{line-height:1;color:#000;background:#FFF;}ol,ul{list-style:none;}/* tables still need 'cellspacing="0"' in the markup  */table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color:#452300;
}

#wrapper {
	margin:auto;
	background-color:#452300;
	width:960px;
}

#header {
	height: 213px;
	background: #8F7859 url(images/top_bg.jpg) repeat-x left bottom;
}

#menu {
	height: 84px;
	background: #3D1C00 url(images/menu_bg.jpg) repeat-x left bottom;
}

#menu ul {
}

#menu li {
}

#menu li a {
	color: #FCFDDF;
	float: left;
	height: 37px;
	padding: 13px 30px 0px 30px;
	font-size: 1.4em;
	font-weight: bold;
}

#menu li a:hover {
	background: #333333;
	color: #fff;
}

#menu .current_page a {
	background: url(images/img04.gif) repeat-x;
}

#menu .inside_page a:hover {
	background: url(images/img04.gif) repeat-x;
}

#page {
	width:740px;
	height: 600px;
	float:left;
	text-align:center;
}

#sidebar{margin-left:740px;
	width:220px;
	background-color:#006666;}

#booktop {
	height: 54px;
	background: #3366CC url(images/book_top.jpg) no-repeat left top;
	width: 720px;
	margin:auto;
}

#bookPages {
	width: 720px;
	height: 450px;
	background: #917859 url(images/img06.gif); ;
	margin:auto;
	text-align:left;
}

#leftPage{
	padding-top:30px;
	margin-left:50px;
	float: left;
	width:300px ;
	height: 400px;
	min-height: 400px;
	background-color:#FF6600;
}

#rightPage{
	padding-top:30px;
	margin-left:370px;
	width: 300px;
	height: 400px;
	min-height: 400px;
	background-color:#FFFF00;
}

#bookbottom {
	clear:both;
	height: 54px;
	background: #3366CC url(images/book_foot.jpg) no-repeat left bottom;
	margin:auto;
	width:720px;
}

/*debug för att se vart sidorna ligger*/
#leftPage, #rightPage{background-color:#FFFF00;}

mitt förslag är att du gör en bild för toppen av boken
en för botten och en för allt där mellan
den senare sätter du som bakgrund på #bookPages

Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
#5

Ett jättetack. Har undertiden pillat själv, men det jag lyckats med är att skapa boken som en enda stor bild, vilket inte är det bästa.

En fråga till. Hur får man en text att utgår från centrum (även vertikalt) ?
I en tabel hade jag satt den som
align="center" valign="middle"

Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
#6

Har efter lång tid och flera projekt senare äntligen hunnit sitta lite mer med denna skapelse.
Lite ändringar har gjort att boken kommer ev. ha en meny på vänster sida om sig. Har därför lagt ner en del krut på att fixa en stabil bok, och trotts dina förmaningar bestämt mig för att ha den i 5 delar

booktop
leftpage - rightpage - rightside
bookbottom

Har också gjort texten på var sida som egna divar.

Vad jag undrar är om du har någon kritik, förutom att jag just gjort den i 3 delar ?

koden ser nu ut såhär :

<body bgcolor="#ffffff">
	<div id="wrapper">
		<div id="header">
			<div id="logo">
				<img src="images/book_layout/loggo.jpg" alt="" height="212" width="475" border="0"/>
			</div>
			<div id="topimgright">
				<img src="images/book_layout/top_img.gif" alt="" height="211" width="309" border="0"/>
			</div>
		</div>
		<div id="menu">
			<ul>
				<li class="current_page"><a href="#">Hem</a></li>
				<li><a href="#">Om Saga</a></li>
				<li><a href="#">Kontakta Oss</a></li>
			</ul>
		</div>
		<div id="page">
			<div id="booktop">booktop</div>
			<div id="bookPages">
				<div id="leftPage">
					<div id="leftPageText">Text</div>
				</div>
				<div id="rightPage">
					<div id="rightPageText">Text</div>
					<div id="rightSide"></div>
				</div>
				
			</div>
			<div id="bookbottom"></div>
		</div>
		<div id="sidebar">Sidebar</div>
</div>

</BODY>

/* http://meyerweb.com/eric/tools/css/reset/   v1.0 | 20080212  */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}/* remember to define focus styles!  */:focus{outline:0;}body{line-height:1;color:#000;background:#FFF;}ol,ul{list-style:none;}/* tables still need 'cellspacing="0"' in the markup  */table{border-collapse:separate;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color:#452300;
}

#wrapper {
	margin:auto;
	background-color:#452300;
	width:960px;
}

#header {
	height: 213px;
	background: #8F7859 url(../images/book_layout/top_bg.jpg) repeat-x left bottom;
}

#menu {
	height: 84px;
	background: #3D1C00 url(../images/book_layout/menu_bg.jpg) repeat-x left bottom;
}

#menu ul {
}

#menu li {
}

#menu li a {
	color: #FCFDDF;
	float: left;
	height: 37px;
	padding: 13px 30px 0px 30px;
	font-size: 1.4em;
	font-weight: bold;
}

#menu li a:hover {
	background: #333333;
	color: #fff;
}

#menu .current_page a {
	background: url(../images/book_layout/img04.gif) repeat-x;
}

#menu .inside_page a:hover {
	background: url(../images/book_layout/img04.gif) repeat-x;
}

#page {
	float:left;
	width:750px;
	height: 600px;
	margin-left:0px;
	text-align:center;
}

#sidebar{margin-left:740px;
	width:220px;
	background-color:#006666;
}

#booktop {
	height: 37px;
	background: #3366CC url(../images/book_layout/book_top.gif) no-repeat left top;
	width: 750px;
	margin:auto;
}

#bookPages {
	width: 750px;
	height: 460px;
	background: #917859 url(../images/book_layout/img06.gif); ;
	margin:auto;
	text-align:left;
}

#leftPage{
	float: left;
	width:330px ;
	height: 460px;
	background: #FF6600 url(../images/book_layout/book_left_side.gif) no-repeat left top;
}

#leftPageText{
	float: left;
	padding-top:0px;
	margin-left:30px;
	width:300px ;
	height: 450px;
	min-height: 450px;
	float: left;
	background-color:#FF6600;
}

#rightPage{
	margin-left:348px;
	width: 330px;
	height: 460px;
	background: #FF6600 url(../images/book_layout/book_middle.gif) no-repeat left top;

}

#rightPageText{
	float: left;
	padding-top:0px;
	margin-left:30px;
	width:300px ;
	height: 450px;
	min-height: 450px;
	background-color:#FF6600;
}

#rightSide{
	margin-left:352px;
	width: 50px;
	height: 460px;
	background: #FF6600 url(../images/book_layout/book_right_side.gif) no-repeat left top;

}

#bookbottom {
	clear:both;
	height: 43px;
	background: #3366CC url(../images/book_layout/book_foot.gif) no-repeat left bottom;
	margin:auto;
	width:750px;
}

/*debug för att se vart sidorna ligger*/
#leftPage, #rightPage{background-color:#FFFF00;}

Det ligger ute på http://www.tales.nu/book.php

Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
#7

Tanken är att lägga iframe för texten, detta så utifall att jag missar kapa texten med PHP så kommer det bara bli scroll. Boken kommer inte gå isär.

josers avatarjoserMedlem sedan mars 20021 152 inlägg
#8

Mr T skrev:

Har undertiden pillat själv, men det jag lyckats med är att skapa boken som en enda stor bild, vilket inte är det bästa.
..

Jo, det är det bästa. En uppdelad bild genererar bara fler http-requests.

Mr T skrev:

Tanken är att lägga iframe för texten, detta så utifall att jag missar kapa texten med PHP så kommer det bara bli scroll.

Behövs inga iframes. men kanske du menar divar med fast storlek och som skrollar en för lång text.

Tog din sida och ädrade koden, både html och css, för att använda bara en bakgrundsbild för boken och två divar med autoskroll för boksidorna. (Tog bilddelarnas storlek och summerade till ursprungsbildens storlek, kan ha blivit fel.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv"><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Tales.nu</title>
<!--<link href="css/book_layout.css" rel="stylesheet" type="text/css" media="screen">-->
<style type="text/css" media="screen">
body {
	margin: 0;
	padding: 0;
	font: 81%/1.2 Arial, Helvetica, sans-serif;
	background-color: #452300;
}
#wrapper {
	margin: auto;
	background-color: #452300;
	width: 960px;
}
#header {
	height: 213px;
	background: #8F7859 url(../images/book_layout/top_bg.jpg) repeat-x left bottom;
}
#header img{
	border: 0;
	display: block;
}
#menu {
	height: 84px;
	background: #3D1C00 url(../images/book_layout/menu_bg.jpg) repeat-x left bottom;
}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu li {
	list-style: none;
	float: left;
}
#menu li a {
	color: #FCFDDF;
	float: left;
	height: 37px;
	padding: 13px 30px 0px 30px;
	font-size: 1.4em;
	font-weight: bold;
	text-decoration: none;
}
#menu li a:hover {
	background: #333333;
	color: #fff;
}
#menu .current_page a {
	background: url(../images/book_layout/img04.gif) repeat-x;
}
#menu .inside_page a:hover {
	background: url(../images/book_layout/img04.gif) repeat-x;
}
#page {
	float: left;
	width: 750px;
	background: url(../images/book_layout/book.jpg) no-repeat 0 0;
	padding: 40px 0 50px;
	text-align: justify;
}
#leftpagetext,
#rightpagetext {
	float: left;
	display: inline; /* IE6 */
	margin: 0 0 0 30px;
	padding: 0 10px;
	width: 300px;
	height: 450px;
	overflow: auto;
}
#sidebar {
	margin-left: 750px;
	width: 210px;
	background-color: #006666;
}
/*debug för att se vart sidorna ligger*/
#leftpagetext, 
#rightpagetext {
	background-color: #999;
}
</style>
</head>
<body>

<div id="wrapper">
	<div id="header">
		<div id="logo">
			<img src="images/book_layout/loggo.jpg" alt="" height="212" width="475">
		</div>
		<div id="topimgright">
			<img src="images/book_layout/top_img.gif" alt="" height="211" width="309">
		</div>
	</div>
	<div id="menu">
		<ul>
			<li class="current_page"><a href="#">Hem</a></li>
			<li><a href="#">Om Saga</a></li>
			<li><a href="#">Kontakta Oss</a></li>
		</ul>
	</div>
	<div id="page">
		<div id="leftpagetext">Text</div>
		<div id="rightpagetext">Text</div>
	</div>
	<div id="sidebar">Sidebar</div>
</div>

</body>
</html>
Mr Ts avatarMr TMedlem sedan maj 20071 061 inlägg
#9

En söndagkvälls pillande så lyckades jag med följande tack vare all hjälpen (Stort tack):
http://www.tales.nu/design/

Dock har jag en förfrågan om man kan få båda bakgrundsbilderna jag använder att gå in bakom boken.
Jag har nu en stjärnhimmel överst och en stenmur längst ner. Endast stenmuren är nu bakom boken.

268 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)