Søger CSS/Dreamweaver CS3 Haj!

jmunch · Indlæg af **jmunch** » 20 feb 2008, 19:35

Hej,
Jeg har et problem. Er igang med at lave en side, og den er bygget op sådan i grove træk sådan her

__________________________
| TOP                    |
--------------------------
| Main                   |
|                        |
|                         |
|                         |
---------------------------
|Bund                      |
---------------------------

Problemet er at min div boks i Main ikke er 100% lang, sådan så bunden hele tiden følger bunden.. Jeg kan heller ikke få bunden til at lille i bunden.
Nogen der har styr på hvordan jeg laver det?

Da Clown · Indlæg af **Da Clown** » 20 feb 2008, 19:43

har du husket at angive body eller html til at være "height:100%" ?

Indlæg af **dwr** » 20 feb 2008, 20:00

Er det muligt at se koden?

jmunch · Indlæg af **jmunch** » 20 feb 2008, 20:34

Siden

Kode: Vælg alt

<!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>Wantone</title>
<link href="data/CSS/wantone mainframe.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<style type="text/css">
<!--
.style1 {
	font-size: 10px;
	color: #666666;
}
-->
</style>
</head>

<body>
<div id="Wrapper">
    <div id="top"><a href="http://www.wantone.dk"><img src="data/toplogo.jpg" alt="Forside" width="448" height="94" border="0" longdesc="http://www.wantone.dk" /></a></div>
  <div id="menu"><table width="788" border="0">
  <tr>
    <td><a href="bryllupsalbum.html">Bryllupsalbum</a></td>
    <td><img src="data/splitter.jpg" /></td>
    <td><a href="tilbehoer.html">Tilbehør</a></td>
    <td><img src="data/splitter.jpg" /></td>
    <td><a href="web-shop.html">Web-Shop</a></td>
    <td><img src="data/splitter.jpg" /></td>
    <td><a href="omwantone.html">Om Wantone</a></td>
    <td><img src="data/splitter.jpg" /></td>
    <td><a href="b2b.html">B2B</a></td>
    <td><img src="data/splitter.jpg" /></td>
    <td><a href="kontakt.html">Kontakt</a></td>
  </tr>
</table>
</div>
    <div id="main">
      <div id="main_i">
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
        <p>Test</p>
      </div>
    </div>
    <div class="style1" id="bottom">
      <div align="center">Wantone - Vasevej 56, 3460 Birkerød - <a href="mailto:info@wantone.dk">info@wantone.dk</a> - Tlf: 50302324</div>
    </div>
</div>
</body>
</html>

CSS (har lavet meget rav i den nu tror jeg)

Kode: Vælg alt

@charset "utf-8";
#Wrapper #top {
	background-color: #0066CC;
	background-image: url(../topgradiant.jpg);
	background-repeat: repeat-x;
	height: 94px;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#Wrapper #menu {
	background-color: #000000;
	background-image: url(../menu.jpg);
	background-repeat: repeat-x;
	height: 45px;
	width: 100%;
	font-size: 12px;
	color: #efefef;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}
#Wrapper #menu tr {
	text-align: center;
	left: auto;
	right: auto;
	font-size: 12px;
	color: #efefef;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

#Wrapper {
	background-position: center;
	text-decoration: none;
	margin: 0px;
	height: auto;
	width: 100%;
}
#Wrapper #main {
	background-color: #2e2e2e;
	background-image: url(../maingradiant.jpg);
	background-repeat: repeat-x;
	background-position: top;
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	height: auto;
}
#Wrapper #main #main_i {
	text-align: justify;
	margin: 0px;
	padding: 0px;
	height: auto;
}

#Wrapper #bottom {
	background-image: url(../bottom.jpg);
	background-repeat: repeat-x;
	height: 15px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	bottom: auto;
}


body {
	background-color: #1B1B1B;
	font-size: 12px;
	color: #efefef;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	height: 100%;
}
a:link {
	color: #efefef;
	text-decoration: none;
}
a:visited {
	color: #efefef;
	text-decoration: none;
}
a:hover {
	color: #3abde3;
	text-decoration: none;
}
a:active {
	color: #3abde3;
	text-decoration: none;
}

tykke · Indlæg af **tykke** » 20 feb 2008, 21:57

forstår ikke helt hvad det er du vil.. men hvis du vil definere en højde på din main kan du gøre det sådan her

div id="main_i" style="height:300px;"

300px er selvfølgelig bare et eksempel

Kazo · Indlæg af **Kazo** » 20 feb 2008, 22:30

CSS

Smides direkte i dokumentet eller i et eksternt CSS-dokument.

Kode: Vælg alt

* {
	margin: 0;
}

html, body {
	height: 100%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
}

.header {
        background-color: #99CC66;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em;
	width: 500px;
	border-width: 0px 1px 0px 1px;
	border-color: #000000;
	border-style: solid;
}
.footer, .push {
	height: 4em; /* .push skal være samme højde som .footer */
	width: 500px;
	margin: auto;
}

.footer { 
        background-color:#999966;
}

HTML

Koden skal sættes ind mellem <body> og </9830>.
Jeg kan ikke poste koden her af en eller anden grund, så den er ændret lidt.

Kode: Vælg alt

<div> skal have en class der hedder: wrapper
<div> skal have en class der hedder: header
<h1>Top</h1>
</div>
<h1>Main</h1>
<p>Indholdstekst</p>
<div> skal have en class der hedder: push
</div>
</div>
<div> skal have en class der hedder: footer
<p>Bund</p>
</div>

Håber det giver mening

jmunch · Indlæg af **jmunch** » 21 feb 2008, 01:13

Ikke helt

Kazo · Indlæg af **Kazo** » 21 feb 2008, 07:13

Bemærk: Jeg har IKKE bygget videre på din kode, men startet forfra.

Her er et screenshot af koden. Kan ikke få den til at poste den korrekt :/

CSS

HTML

jmunch · Indlæg af **jmunch** » 21 feb 2008, 12:36

Det så lidt mere overskueligt ud

Tak.. prøver ad!