• Aktualisierte Forenregeln

    Eine kleine Änderung hat es im Bereich Forenregeln unter Abschnitt 2 gegeben, wo wir nun explizit darauf verweisen, dass Forenkommentare in unserer Heftrubrik Leserbriefe landen können.

    Forenregeln


    Vielen Dank

Design mit CSS Ausrichtungs Problem

I

ich98

Gast
Hi
ich bin gerade dabei mein HP leicht zu verändern.
Das sieht jetzt so aus: http://blackhawk.bl.ohost.de/i...

Die CSS ist so aufgebaut:
Code: 
body {
  font-size:12px;
  padding: 0px;
  margin: 0px auto;
  background-color:#FFFFFF ;

  }

#border
{
z-index:0;
position:absolute;
left:50%;
width:904px;
margin-left:-452px;
margin-top: 25px;
}

#logo { position:relative;
        width: 189px;
        height: 531px;
        float: left;
        margin-right: 4px;

}
#navi { position:relative;
        width: 610px;
        height: 26px;
        float:left;

        margin-bottom:2px;
        font-family:Comic Sans MS;
        font-size: 18px;
        font-color: #FFFFFF;
}
#box { position:absolute;
       background-color:#0066CC;
       width:606px;
       height:502px ;
       margin-top:-236px;
       overflow:auto;
       margin-left: -259px;
       left:50%;
       top:50%;

       }
#navi2 { position:relative;
	width: 93px;
         height: 532px;
         float:left;
         margin-left: 0px;
         font-family: Verdana;
         font-size: 10px;
         color:#FFFFFF;
}
#tablenavi {
	font-family: Verdana;
         font-size: 10px;
         color:#FFFFFF;
}

#titel { font-family: Verdana;
         font-size: 15px;
         color:#FFFFFF;
         text-decoration:underline;
         font-weight: bold;
}

#review {font-family: Verdana;
         font-size: 14px;
         color:#FFFF00;
         text-decoration:none;
         font-weight: bold;
}
#text {font-family: Arial;
         font-size: 12px;
         color:#FFFFFF;
         text-decoration:none;
}
         }
#reviewtext {font-family: Verdana;
         font-size: 12px;
         color:#FFFFFF;
         text-decoration:none;
         }

#news {  font-family: Verdana;
         font-size: 12px;
         color:#FFFFFF;
         text-decoration:none;
         font-weight: bold;
}

#newstitel {font-family: Verdana;
         font-size: 12px;
         color:#FFFFFF;
         text-decoration:underline;
         font-weight: bold;
}

#autor { font-family: Verdana;
         font-size: 9px;
         color:#C0C0C0;
         text-decoration:none;
         font-weight: normal;
}
.mpc {font-family: Verdana;
         font-size: 14px;
         color:#FFFF00;
         text-decoration:underline;
         font-weight:bold ;}

.mpc1 {  font-family: Verdana;
         font-size: 14px;
         color:#FFFF00;
         text-decoration:underline;
         font-weight:bold ; }

.mpc2 {  font-family: Verdana;
         font-size: 12px;
         color:#FFFFFF;
         text-decoration:underline;
         font-weight: ;
         font-weight:bold ;}

.mpc3 {  font-family: Verdana;
         font-size: 14px;
         color:#FFFFFF;
         text-decoration:underline;
         font-weight:bold ; }

.mpc4 {  font-family: Verdana;
         font-size: 12px;
         color:#FFFFFF;
         }
.mpc5 {  font-family: Verdana;
         font-size: 10px;
         color:#FFFFFF;
         text-decoration:underline;

         }
.mpc6 {  font-family: Verdana;
         font-size: 10px;
         color:#FFFFFF;
}



  a:link, a:visited, a:active, a:hover 
{font-weight:normal; color:#F26F0D;text-decoration:none }
	a:active, a:hover {color:#D8DDE0;font-weight:normal;}
  a:link.navi3 {font-weight:normal; color:#FFFFFF;text-decoration:none }
  a:visited.navi3 {font-weight:normal; color:#FFFFFF;text-decoration:none }
  a:active.navi3 {font-weight:normal; color:#FFFFFF;text-decoration:none }
  a:hover.navi3 {font-weight:normal; color:#FFFFFF;text-decoration:none }
  a:active.navi3 {color:#D8DDE0;font-weight:normal;}
  a:hover.navi3 {color:#D8DDE0;font-weight:normal;}
der HTML Text so:
Code: 
<!DOCTYPE html public 
"-//W3C//DTD HTML 4.01 Transitional//EN">    

<!-- Durch ändern von Transitional in Strict wurden 
die LinkButton auseinandergezogen -->
<html>
<head>
<title>BlackHawk-Media ::: Startseite</title>
<meta name="author" content="S C">
<meta name="generator" content="html-Editor phase 5.3">
<meta name="keywords" content="">
<meta name="discription" content="">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<!---<link rel="SHORTCUT ICON" href="Grafiken/favicon.ico" />  -->
<link rel="stylesheet" href="css/css2.css" type="text/css">


</head>
<body>

<div id="border">


          <!-- Logo -->
         <div id="logo">
         <img src="Grafiken/Logo2.jpg" alt="BlackHawk-Media-Logo">
         </div>
          <!-- Logo Ende -->



         <!-- Navigation -->
     <div id="navi">
            <div style=" position:absolute;z-index:1;">
            <img src="Grafiken/Button.gif"><img src="Grafiken/Button.gif">
<img src="Grafiken/Button.gif"><img src="Grafiken/Button.gif">
<img src="Grafiken/Button.gif"><img src="Grafiken/Button.gif">
	</div>
	<div style="position:absolute;z-index:4">
        	<table cellpadding="0px" width="612px">
		<tr>
 		<td width="102px" height="22px"><center>
<a href="index.html" class="navi3">Startseite</a></center></td>
        		<td width="102px" height="22px"><center>
<a href=" [uRL=http://blackhawk.bl.ohost.de/SMF/index.php%22]http://blackhawk.bl.ohost.de/S...[/uRL]  class="navi3">Forum</a></center></td>
 		<td width="102px" height="22px"><center><
a href="spiele.html" class="navi3">Spiele</a></center></td>
 		<td width="102px" height="22px"><center><
a href="hardware.html" class="navi3">Hardware</a></center></td>
        		<td width="102px" height="22px"><center>
<a href="downloads.html" class="navi3">Downloads</a></center></td>
 		<td width="102px" height="22px"><center>
<a href="sonstiges.html" class="navi3">Sonstiges</a></center></td>
	        </tr>
	</table>
	</div>
     </div>
          <!-- Navigation Ende -->
          <!-- Navigation 2 -->
         <div id="navi2" >
          <div style=" position:absolute;z-index:1;">
          <img src="Grafiken/Navi3.jpg"></div>
          <div style=" position:absolute;z-index:2;">
          <table width="95px" id="tablenavi" align="center">
	 <tr>
 	 	<td height="440px" valign="top" width="95px" >
                  <br>
                 <!-- Links -->

                 <!-- Links Ende -->
                 </td>
	 </tr>
	 <tr>
 	 	<td height="50px" width="95px">
<a href="impressum.html" class="navi3">Impressum & Kontakt</a><br>
          	© C S
 	 	</td>
	 </tr>
	 </table>
         </div>
         </div>

          <!-- Navigation 2 Ende -->
          <!-- Inhalt -->
          <div id="box">

         <div id="text">
         <center>
   	 Text......


         </center>
         </div>



         </div>
         <!-- Inhalt Ende -->

         </div>






</body>
</html>

Nun mein Problem, der Boxteil ist mometan nicht gerade elegant eingebunden, sondern nur mit Positinierung d.h. nicht so wie die anderen floated dieser Teil nicht.
Nun meine Frage wie muss ich diesen Teil:
Code: 
#box { position:absolute;
       background-color:#0066CC;
       width:606px;
       height:502px ;
       margin-top:-236px;
       overflow:auto;
       margin-left: -259px;
       left:50%;
       top:50%; }
umbauen, damit der Inhaltbereich genau dort ist, wo er sich jetzt befindet.
Mit diesem Umbau will ich Problemen mit verschiedenen Browsern vorbeugen.

Gruß

Edit: Mist Design gesprengt :S Besser bekomm ichs nicht hin :oink:
 
Du hast ja überall float:left; angegeben :o

Der Teil links muss float:left; haben, der rechte Teil float:right; und der Teil in der Mitte gar nicht...

Falls dort drunter noch was soll, clear:both;...
 
Cooli11 am 31.05.2006 16:55 schrieb:
Du hast ja überall float:left; angegeben :o

Der Teil links muss float:left; haben, der rechte Teil float:right; und der Teil in der Mitte gar nicht...

Falls dort drunter noch was soll, clear:both;...
Zum Vergrößern anklicken....

gut und wie soll das aufbauen, damit es so wie gewünscht aussieht?

Ich bekommes relativ so hin, doch dann spinnt der rechte Teil sprich, er ist nicht bündig.
Kannst du mal den code der css die navi, logo, navi2 und box betreffende posten?
Sowie die anordnung von:
<div id="navi"></div>
<div id="logo"></div>
<div id="navi2"></div>
<div id="box"></div>

Irgendwie bekomm ich das nicht hin :S
 
hmmm irgendwie glaub ich, dass das mit float noch mehr Gefriemel wird und du so auch nicht ganz auf Positionsangaben verzichten kannst...

Wenn ichs nämlich so probier beginnt der rechte Teil nämlich dort, wo der mittlere in der Höhe aufhört, ist also viel zu niedrig...

Außerdem schiebt sich die Navigation nach links über den Banner, das ist sogar so vorgesehen (müsste man dann mit margin-left wieder ausgleichen)



Ich würds übrigens erstmal mit nem vernünftigen Doctype versuchen, wenn du es möglichst in allen Browsern gleich haben willst ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Vllt hat ja hier jemand anderes noch ne Idee?
 
Einloggen o. Registrieren zum Antworten.

Ähnliche Themen

M
HTML-Wechselnde Bilder mit Übergang
Antworten
5
Aufrufe
1K
mpwfg41
M
Worrel
Webseiten-Styles anpassen (Amino)
Antworten
13
Aufrufe
2K
Worrel
Worrel
R
unterschiedliche Darstellung im IE7 und FF3 und weitere Probleme
Antworten
0
Aufrufe
477
Rayne
R
I
CSS-Problem!
Antworten
0
Aufrufe
452
IchProbiersNochmal
I
F
großes dringendes prob ( html/css)
Antworten
6
Aufrufe
555
flashback830
F
Oben Unten
Zurück