zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem: 3 Div's horizontal positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.05.2004, 13:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2004
Beiträge: 14
Krieju befindet sich auf einem aufstrebenden Ast
Standard Problem: 3 Div's horizontal positionieren

Hallo,

bin noch unerfahren mit CSS und stehe vor dem Problem, dass ich drei Div's (Text1, Text2 und Text3) mit jeweils der Größe von 200px nebeneinander positionieren will. Sie befinden sich wiederum in einem Div-Container und sollen einen Abstand von 30px zueinander haben und umrandet sein.
Aber irgendwie kriege ich das nicht hin.
Ich hab's mit "float" probiert, mit absoluter und relativer Positionierung.
Waren sie mal richtig ausgerichtet, dann fehlte mindestens einem Div die Umrandung (obwohl im externen Stylesheet definiert). Und wenn es im IE einigermaßen paßte, dann waren die Blöcke bei Opera oder NN nicht mehr wiederzuerkennen.
Bei http://css.fractatulum.net/ habe ich ein Beispiel gefunden, das eigentlich gepasst hätte; aber nachdem ich es in den Code eingebaut hatte, funktionierte das auch nicht mehr.
Jetzt weiß ich nicht mehr weiter.
Kann mir jemand helfen, wie ich die drei Blöcke horizontal anordnen kann?
Hier der Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Willkommen bei Gesundheit-Fördern.de</title>
        <meta name="generator" content="Namo WebEditor v5.0">
        <link type="text/css" rel="stylesheet" href="../css/general.css">
<style type="text/css" title="currentStyle">
<!--
@import url(../css/general.css);
       
-->
</style>
    </head>
    <body>
        
        <div id="container">
            <div id="intro">
                
                
                <div id="text">
                    <h2 align="center">
                        Überschrift
                    </h2>
                    <p align="center">
                        Untertitel
                    </p>
                    
                        <div id="box1">
                            <p align="center">
                                Text1
                            </p>
                            <p align="center">
                                noch Text1

                                
                            </p>
                        </div>
                        <div id="box2">
                            <p align="center">
                                Text2
                            </p>
                            <p align="center">
                                noch Text2

                                
                            </p>
                        </div>
                        <div id="box3">
                            <p align="center">
                                Text3
                            </p>
                            <p align="center">
                                noch Text3

                                 noch Text3
                            </p>
                        </div>
                        <div class="textbereich" align:="center">
			<div class="sz" style="text-align:center">
                            Überschrift weiterer Text
                        </div>
                        


                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
			    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat	
                        </p>
                        


                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
			    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                       </p>
                        


                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
			    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
                       </p>
                    </div>
                    
                </div>
                
            </div>
            
            <div id="footer">
                Fußbereich
            </div>
            
        </div>
    </body>
</html>
Folgende CSS-Definitionen stehen in einer externen Datei:
Code:
body {
	margin: 0;
	padding: 0;
	background: #EBE8D0 url("../images/bg_body.gif") repeat-x left top; 
	text-align: center;
	color:#333
	font: Arial, Helvetica, Serif;
	font-size: 75%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style: normal;
}

#container {
	width: 740px;
	margin: 0 auto;
	text-align: left;
	background-color: transparent;
}

#intro {
	border: 1px solid #A79355;
	border-width: 0 1px;
}


/* Textkörper
--------------------------------- */
#text {
	/*background-color: #E8E888;*/
	background-color: #FFFFCC;
	margin: 0px 0px;
	border-width: 0 1px 0;
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom: 8px solid #BDAF83;
	border-top: 8px solid #BDAF83;
	text-align: justify;
	font-size: 0,9em;
	font-weight: bold;
}

#text h3 {
	height: 20px;
	border: 1px solid #A79355;
	border-width: 1px 0;
	margin: 1em 0 .5em;
	background-color: #C7E38C;
	text-align: center;
}
  

#text .p3 {
margin: 10px 15px 15px 0;
width: 270px;
}

.sz {
	font: bold larger;
}
/* ====================================================================

.textbereich
	{
	background-color: transparent;
	font: x-small Georgia,Serif;
	margin: 20px 20px 20px 20px;}

.container, .textbereich
	{ position: relative; }


/* Muster http://css.fractatulum.net/csseditor/index.php?layout=float4*/
.box1{ 
width: 200px;
background:#cde0eb; 
border:1px solid black; 
padding:10px; 
margin:0 10px 0 10px;} 

.box2{ 
padding:10px 10px 10px 30px; 
width:200px;
border:1px solid black; 
float:left;} 

.box3{ 
width: 200px;
color:darkred; 
border:1px solid black;
padding:10px 30px 10px 10px; 
margin:0 0 0 ;}
/* Ende Muster http://css.fractatulum.net/csseditor/index.php?layout=float4*/


/* footer
--------------------------------- */
#footer {
  margin:1.5em 0 0;
  padding:10px 5px;
  border:1px solid #A79355;
  border-width:5px 0;
  font: bold 85% Georgia,Verdana,Arial,Helvetica,Sans-serif;
  text-align:center;	  
}

#footer a:link, #footer a:visited {
  padding:0 5px;
  font-weight:normal;
  }


a, a:visited {
	text-decoration:none;	
	padding:0 5px;
  
}

a:hover {
	text-decoration: none;
	color: Purple;
}
Bin für jede Hilfe dankbar!

Gruß
Jürgen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.05.2004, 14:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Dein Stylesheet ist etwas konfus. Insbesondere das du den Boxen IDs gegeben hast (id="box1") aber im Stylesheet du Klassenselektoren verwendest (".box1" statt "#box1").

Was Du da genau machst habe ich mir nicht angeschau, aber hier ist vereinfachtes Beispiel:
Code:
<html>
  <head>
    <title></title>
    <style type="text/css">
		.box {
			width: 200px;
			border: 1px solid Black;
			float: left;
		}
		
		#box1{
			margin-right: 15px;
		}
		
		#box2{ 
			margin: 0 15px; 
		}
		
		#box3{
			margin-left: 15px;
		}
    </style>
</head>
  <body>
    <div id="box1" class="box">
      <p align="center">
        Text1
      </p>
      <p align="center">
        noch Text1

      </p>
    </div>
    <div id="box2" class="box">
      <p align="center">
        Text2
      </p>
      <p align="center">
        noch Text2

      </p>
    </div>
    <div id="box3" class="box">
      <p align="center">
        Text3
      </p>
      <p align="center">
        noch Text3

         noch Text3
      </p>
    </div>
	 <br style="clear: both">
  </body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.05.2004, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.05.2004
Beiträge: 14
Krieju befindet sich auf einem aufstrebenden Ast
Standard Danke! Hat funktioniert.

Hallo RoToRa,

danke für das Beispiel; hat prima geklappt.

Habe auch das "Konfuse" beseitigt. Danke für diesen Hinweis.

Gruß
Jürgen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div's beim Scrollen horizontal verschieben insider Javascript & Ajax 2 22.06.2014 14:48
Buttons horizontal positionieren mit immer gleichem randabstand troneleck CSS 13 22.08.2013 19:45
Layout mit DIVs Problem mrjoes CSS 4 17.06.2013 14:02
Divs per float positionieren - Problem mit IE fluppi CSS 9 20.03.2008 13:16
Problem mit Divs in Firefox saintniclas (X)HTML 4 04.08.2007 18:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:11 Uhr.