"Boksen" fyldes ikke helt ud & Std. menu'en virker ikke -> Hjælp ;-)
Kære alleJeg har lige et par CSS spørgsmål, jeg håber nogle af jer kan hjælpe med at løse.....
Nu har jeg prøvet hele aftenen uden at få det til at funge.....
Scenarie:
Jeg har denne skabelon, jeg prøver at ramme med CSS "kasser"....
http://www.jasperfoto.dk/ny-side/Hjemmeside1.jpg
Baggrundsbilledet vil selvfølgelig blive ændret senere ;-)
Spørgsmål 1:
Jeg har fået lavet den store "kasse" centreret i midten (med baggrundbillede i).
Derefter et tekstfelt i bunden (gul).
Et tekstfelt i højre side (blå).
De to tekstfelter er fyldt helt ud, selvom de ikke har tekst i !!!
Sådan skal det være...
Se: http://www.jasperfoto.dk/ny-side/default2.htm
MEN - Jeg har fået at vide, at jeg skal have følgende
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
i toppen, så derfor har jeg sat den kode ind, og nu er "kasserne" kun fyldt ud farve, der hvor der er tekst ??? -> se: http://www.jasperfoto.dk/ny-side
Hvorfor det ???
Jeg har jo sat: width: 1000 px; ???
Spørgsmål 2:
Jeg har fundet en menu jeg gerne vil anvende, men den kan jeg slet ikke få til at virke eller være transparent ???
Nogen der vil hjælpe med at få den til at virke ???
Menu'en er her fra:
http://www.cssplay.co.uk/menus/flyout_horizontal.html
Jeg bruger IE8 - men det er vel ligemeget !!! Min side skal virke i alle browsere !!
Skal man downloade nogle transparent billeder eller andet ??? -
Jeg vedlægger mine koder herunder, såfremt nogle lige vil rette i dem for mig ;-) På forhånd tak for hjælpen...
....og God Aften ;-)
/Peter
Mappe ser således ud:
Hjemmeside1.jpg
style.css
default.htm
STYLE.CSS FIL:
body {
background-color: #FFCC66;
}
#storboks {
position:absolute;
left:50%;
top:50%;
margin-left:-501px;
width:1002px;
height:595px;
margin-top:-297.5px;
background-image: url("Hjemmeside1.jpg");
border: 1px solid black;
}
#tekstboks {
position: absolute;
top: 294px;
left: 421px;
width: 557 px;
height: 172 px;
background: blue;
}
#tekstboks-bund {
position: absolute;
bottom: 2px;
width: 1000 px;
height: 18 px;
background: yellow;
}
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_horizontal.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.container {width:695px; background:#fff url(hide_seek.jpg); margin:50px auto; padding:10px; border:1px solid #000;}
.menu {font-family: arial, sans-serif; width:131px; height:217px; position:relative; margin:0; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:120px; height:30px; border:1px solid #5a3; border-width:1px 1px 0 0; background:transparent url(../../opacity/opaque.png); line-height:29px; font-size:11px; padding-left:10px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:131px; width:565px; background:transparent;}
.menu ul li:hover ul li {float:left;}
.menu ul li:hover ul li a {display:block; background:transparent url(../../opacity/opaque.png); color:#000; width:130px; float:left;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
DEFAULT.HTM FIL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mit dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="storboks">
<div class="container">
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</div>
<div id="tekstboks">
<ul>
<li>Hans Hedtoft</li>
</ul>
</div>
<div id="tekstboks-bund">
Jasper Simonsen
</div>
</div>
</body>
</html>
