✔ 2 Divs nebeneinander

Status
Nicht offen für weitere Antworten.
Online-Skater

Online-Skater

Erfahrenes Mitglied
Hallo

Vorweg ich habe mich wirklich mit dem Problem befasst, nicht ausreichend um dieses Problem zu lösen. In der Suche sucht man sich tot bei dem Begriff.
Also ich möchte vom Tabellen-Layout wegkommen und mit Div-Layout arbeiten, nur gestaltet sich das um eingies schwieriger...
Folgenden HTML-Code:
HTML: 
<div id="a">
<img src="img/Ampel_r.gif" title="Ampel" />
<?php
     include "./link/gruss.php";
?>
<img src="img/Ampel_l.gif" title="Ampel"><br /><br />
<div class="left">
 <span>Die Seite befindet sich im im Aufbau.<br />
 This Site is under constructions.</span><br />
</div

<div class="right">
 Vielen Dank an CGHost für dieses Webspace.
 <a href="http://www.cghost.de">
  <img src="http://www.cghost.de/banner/lila.jpg" border="0" title="CGHost" />
 </a>
</div>
Erstes PES5 Video <a href="http://www.cghost.de/~shadowmasta/data/Pes5.avi">hier</a>
</div>

und hier CSS:
Code: 
html {height:100%; margin:0px}
body {
      	background-color: #00B95C;
      	font-family: Courier New;
      	font-size: 11px;
      	color: #000000;
      	margin: 0%;
      	padding: 0%;
      	height: 100%;
}
div#a {
 background-color: #D5EADA;
 margin:0% 3%;
 padding:0% 3%;
 height:100%;
 border-left:1px solid #000;
 border-right:1px solid #000;
}
div.left {
  position: absolute;
  left: 100px;
  top: 30px
  width: 500px;
  border:1px solid #000;
}
div.right {
  position: absolute;
  left: 500px;
  top: 30px
  width: 400px;
  border:1px solid #000;
}

Ergebnis: hier

Ich weiß Div-Elemente sind Block-Elemente, habe auch schon float benutzt dann sind die aber weit voneinander weg. Wie muss der Css-Code lauten das man die wie Tabellenzellen schön nebeneinander (ohne/mit Abstand) gestalten kann.
Es ist ne simple Frage nur die Lösung ist nicht so simple ...

mfg. Shadow & thx
 
Vermutlich sind die folgenden Syntax-Fehler im HTML- und CSS-Code der Grund für die Darstellungsprobleme:

  • Die schliessende >-Klammer fehlt:
Code: 
<div class="left">
 <span>Die Seite befindet sich im im Aufbau.<br />
 This Site is under constructions.</span><br />
</div>
  • Nach der CSS-Eigenschaft top:30px fehlt das Semikolon:
Code: 
div.left {
  position: absolute;
  left: 100px;
  top: 30px;
  width: 500px;
  border:1px solid #000;
}
div.right {
  position: absolute;
  left: 500px;
  top: 30px;
  width: 400px;
  border:1px solid #000;
}
 
Ähm ok dankeschön

das kann ja dann auch nicht gehen :(
Aber ist das auch praktisch relevant mit dem position:absolute ? Der vernachlässigt ja mit den Top und left - Koordinaten das Block spezifische ?

Ich probiere und studiere das weiter vllt ergeben sich noch Fragen aber erstmal erledigt. Danke
 
So bin schon ein ganz schönes Stück weiter.

Habe 3 Fragen.

1. Im IE und FF sieht es unterschiedlich aus wegen Scrollleiste ->IE
Kann man das überhaupt verhindern ? Es würde ja gleich aussehn wenn der FF auch so ein Scrollbalken machen würde der bei wenig Inhalt überflüssig wäre ?
2. Wenn man die Seite mit IE öffnet achtet mal auf das Menü + Content was sich leicht verschiebt wenn man auf einen link fährt.
3. Ja wer hätte es gedacht der IE... Beim rüberfahren muss man auf die Schrift was beim FF nicht der Fall ist, um den Einblendeffekt zu erzielen.

Ich danke für die Problemlösung lieder kann man das schlecht suchen :rolleyes:

CSS
HTML: 
html
{
  height:100%;
  margin:0px;
}

body
{
  background-color: #00B95C;
  font-family: Courier New;
  font-size: 11px;
  color: #000000;
  margin: 0%;
  padding: 0%;
  height: 100%;
}
/*---------------- DIV-Struktur -----------------*/
#higru
{
  text-align: center;
  background-color: #D5EADA;
  margin:0% 3%;
  padding:0% 1%;
  height:100%;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
#left
{
  background-color:#bdbec6;
  width:128px;
  float:left;
}
#content
{
  border:1px solid #efeff7;
  background-color:#efeff7;
  width:720px;
  float:right;
  padding:0px 10px;
}
/*---------------- Navigation -----------------*/
.menutitle
{
  font-weight:bold;
  text-align:center;
  margin:4px;
}
.menucontainer
{
  border:1px solid #000;
  background-color:#7b7d8e;
  width:106px;
  margin:10px;
}
a.menu
{
  display:block;
  padding:3px;
  border-top:1px solid #000;
  background-color:#737994;
  text-align:center;
  color:#eeeeee;
  text-decoration:none;
}
a.menu:link, a.menu:visited
{
  color:#eeeeee;
  background-color:#737994;
  text-decoration:none; font-weight:bold;
}
a.menu:active, a.menu:hover
{
  color:#737994; font-weight:bold;
  background-color:#eeeeee;
}

HTML-Code siehe Seite http://www.cghost.de/~shadowmasta/

vielen Dank

besonders an michaelsinterface der auch so beim Nebenbei Lesen viel geholfen hat ;)
 
  • Scrollbalken bei Bedarf
Code: 
html, body
{
  height:100%;
  margin:0px;
  overflow: auto;
}
  • Das mysteriöse IE-Verhalten kann ich im Moment (noch) nicht nachvollziehen ... :confused:

  • hover-Effekt auf komplette Menübreite
Code: 
a.menu
{
  display:block;
  width:100px;
  border-top:1px solid #000;
  background-color:#737994;
  text-align:center;
  color:#eeeeee;
  text-decoration:none;
}
 
Hi,

das zweite Problem hat seine Ursache in der prozentualen Paddingangabe in #higru. Dort könntest
du Definitionen für IEs und Nichts-IEs machen.
Code: 
#higru
{
  text-align: center;
  background-color: #D5EADA;
  margin:0% 3%;
  padding:0% 1% !important; /* Nicht-IE-Browser */
  padding:0% 12px;          /* IEs */
  height:100%;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
Ciao
Quaese
 
Vielen Dank an euch beide das hat funktioniert. Ich habe nun aber leicht umstrukturiert um möglichst bei beiden Browsern gleichen css code zu verwenden. Das klappt soweit ganz gut bis auf ein kleinen Fehler. Diesmal macht der FF nicht mit, gleiche Seite schaut es euch an mit IE und FF ->Rahmen fehlt bei FF teilweise :suspekt:

Code: 
html , body
{
  background-color: #00B95C;
  font-family: Courier New;
  font-size: 11px;
  color: #000000;
  margin: 0%;
  padding: 0%;
  height: 100%;
  overflow: auto;
}
#higru
{
  background-color: #D5EADA;
  margin:0% 3%;
  border-left:1px solid #000;
  border-right:1px solid #000;
}
#title
{
  text-align: center;
}
#container
{
  width:920px;
  margin: 0px auto;
  background-color:#bdbec6;
  border:1px solid #000000;
}
#left
{
  background-color:#bdbec6;
  width:128px;
  float:left;
}
#content
{
  border:1px solid #efeff7;
  background-color:#efeff7;
  width:770px;
  float:right;
  padding:0px 10px;
}

Titel und Container sind neu, letzteres dient dazu die beiden left und content zusammzuhalten ;) mit Rahmen versteht sich.

Auszug aus html
HTML: 
<div id="higru">
 <div id="title">
 </div>
 <div id="container">
  <div id="left">
   <div class="menucontainer">
    <p class="menutitle">MENU 1</p>
    <a class="menu" href="#">Hyperlink 1</a>
    <a class="menu" href="#">Hyperlink 2</a>
    <a class="menu" href="#">Hyperlink 3</a>
    <a class="menu" href="#">Hyperlink 4</a>
    <a class="menu" href="#">Hyperlink 5</a>
   </div>
  </div>
 <div id="content">
 </div>
 </div>
 <br style="clear:both;" />
</div>

das is definitiv die letzte Frage zu dem Problem ^^
Ich habe wirklich vieles versucht nun scheint mir der FF suspekt der macht doch sonst immer alles richtig :/

Danke im Vorraus

mfg Shadow
 
Probier es mal mit folgendem HTML-Code:

HTML: 
<div id="higru">
     <div id="title">title</div>
     <div id="container">
          <div id="left">
               <div class="menucontainer">
                    <p class="menutitle">MENU 1</p>
                    <a class="menu" href="#">Hyperlink 1</a>
                    <a class="menu" href="#">Hyperlink 2</a>
                    <a class="menu" href="#">Hyperlink 3</a>
                    <a class="menu" href="#">Hyperlink 4</a>
                    <a class="menu" href="#">Hyperlink 5</a>
               </div>
          </div>
          <div id="content">content</div>

          <div style="clear:both;">&nbsp;</div>
     </div>
</div>
 
Danke daran hab ich nicht mehr gedacht :rolleyes:

Habe:
michaelsinterface hat gesagt.:
Probier es mal mit folgendem HTML-Code:
HTML: 
<div style="clear:both;">&nbsp;</div>
Zum Vergrößern anklicken....

mit
HTML: 
<br style="clear:both;" />
ersetzt damit keine Freizeile entsteht aber das nur nebenbei.
Also hat der FF nix falsch gemacht ^^
Nochmals Danke Thema is erledigt
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück