div probem

ocinrezle · 21. September 2008

hallo ich Stylesheet und ich woll oben in dem weißen streifen über dem header 2Buttons und ein Forumlar haben das mit den buttons klappt auch nur wenn ich jetzt in den div der buttons noch zusätzlich ein Formular dazu tue verschiebt sich das formular in eine neue reihe hier mal die Codes und der screenshot:

Code:

* {
  margin:0;
  padding:0;
}


body{
background-color:#494949;
color:#ffffff;
}

#box1{
margin:auto;
width:1000px;
height:200px;
}

#kopf{
background-image:url(images/header.gif);
width:100%;
height:182px;
margin-top:31px;
}

#navigation ul {
list-style-type: none;}
#navigation { width: 991px; position: absolute; top: 212px; height: 32px; padding: 0 0 0 10px; background-color: #c0c0c0; background-image: url(images/bg_navi.gif);}
#navigation li {
font-size: 11px;
display: inline;
line-height: 21px;}
#navigation a { color: #ffffff; text-decoration: none; padding: 0 10px; float: left; }
#inhalt {position:absolute; top:244px; background-color:#000000; padding: 10px; width:980px; height:450px; border:1pt solid #ffffff;}
#box2 {float: right; margin-top: 0px; background-color:#c0c0c0; background-image: url(images/leiste_rechts.gif); background-repeat: no-repeat;
 width:200px; height:150px; }
#box3 {float: right; background-color:#c0c0c0; background-image: url(images/leiste_rechts.gif); background-repeat: no-repeat;
 width:200px; height:150px; position: absolute; top: 160px; right:10px;}
#upload {height:20px; margin-left:300px;}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleisten</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box1">
<div id="kopf">
<div id="upload"><img src="http://www.tutorials.de/forum/images/button_upload.gif">&nbsp;&nbsp;&nbsp;<img src="http://www.tutorials.de/forum/images/button_profil.gif"><form><input type="text"></div>
<div id="navigation">
<li><a href="index.php?ac=home"><img src="http://www.tutorials.de/forum/images/button_home.gif" title="home" border="0"></a></li>
<li><a href="index.php?ac=news"><img src="http://www.tutorials.de/forum/images/button_news.gif" title="news" border="0"></a></li>
<li><a href="index.php?ac=about"><img src="http://www.tutorials.de/forum/images/button_about.gif" title="about Musik-talents" border="0"></a></li>
</div>
<div id="inhalt">
<div id="box2"><div align="right">titel&nbsp;&nbsp;</div><br>sadasds</div>
<div id="box3"><div align="right">titel&nbsp;&nbsp;</div><br>sadasds</div>
<?php
if($_GET['ac']=='home' || !$_GET['ac'])include 'home.html';
if($_GET['ac']=='news')include 'news.html';
if($_GET['ac']=='about')include 'about.html';
?>
</div>
</div>
</body>
</html>

Vielen dank schonmal im Vorraus!

Maik · 21. September 2008

Hi,

zunächst mal empfehle ich dir, das Markup des Boxmodells zu validieren, da zum einen darin die schliessenden Tags für #box1 und das form-Element fehlen, und zum anderen die Listennavigation ihr dazugehöriges ul-Elternelement nicht besitzt:

Code:

<div id="box1">
     <div id="kopf">
          <div id="upload">
               <img src="http://www.tutorials.de/forum/images/button_upload.gif" alt="">&nbsp;&nbsp;&nbsp;<img src="http://www.tutorials.de/forum/images/button_profil" alt="">
               <form><input type="text"></form>
          </div>
          <div id="navigation">
               <ul>
                   <li><a href="index.php?ac=home"><img src="http://www.tutorials.de/forum/images/button_home.gif" title="home" border="0"></a></li>
                   <li><a href="index.php?ac=news"><img src="http://www.tutorials.de/forum/images/button_news.gif" title="news" border="0"></a></li>
                   <li><a href="index.php?ac=about"><img src="http://www.tutorials.de/forum/images/button_about.gif" title="about Musik-talents" border="0"></a></li>
               </ul>
          </div>
          <div id="inhalt">
               <div id="box2"><div align="right">titel&nbsp;&nbsp;</div><br>sadasds</div>
               <div id="box3"><div align="right">titel&nbsp;&nbsp;</div><br>sadasds</div>
               <?php
               if($_GET['ac']=='home' || !$_GET['ac'])include 'home.html';
               if($_GET['ac']=='news')include 'news.html';
               if($_GET['ac']=='about')include 'about.html';
               ?>
          </div>
     </div>
</div>

Mit der CSS-Erweiterung

Code:

#upload form { display:inline; }

erhält das Blockelement form "Inline-Element-Charakteristika", erzeugt also nicht mehr einen Absatz im Textfluß, und wird so neben den Grafiken ausgerichtet.

mfg Maik

div probem

ocinrezle

Gesperrt

Maik

Neue Beiträge