Ergebnis 1 bis 4 von 4
  1. 05-08-2008, 14:40 #1
    hidingmyfame
    hidingmyfame ist offline Jungspund
    registriert
    08-07-2008
    Beiträge
    17

    Problem mit float und clear

    Hallo an alle,

    ich bin gerade dabei eine Website zu erstellen und da tritt nun folgendes Problem auf:

    Ich hab in einem <div> Tag 3 weitere nebeneinander platziert was nun im FF so aussieht (FALSCH):



    aussehen sollte es so:



    Hier der entsprechende (X)HTML 1.0 Strict Quelltext:

    Code:
            <div id="content_area">
        	<div id="content_left">
            	<div id="content_box_1">
                	<div id="content_box_1_image"></div>
					<div id="content_box_1_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                    
                   </div>                                    
                </div>
                <div id="content_box_2">
                	<div id="content_box_2_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.                    
                    </div>
                    <div id="content_box_2_menu">
                    	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%; background-color: #8dc73d;">
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle2"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        </table>
                    </div>                
                </div>
                <div class="clear"></div>
            </div>
            <div id="content_right">
            	<div id="content_right_text">
            		<span class="heading">Lorem ipsum</span><br />
                    <br />
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                
                </div>
                <div class="clear"></div>
            </div>   
        </div>            
        <div id="grey_stripe"></div>
        <div id="footer">
        	<div id="anschrift1">
                <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
               Lorem ipsum<br />
                <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
			<div id="anschrift2">
            	<span class="bold">Lorem ipsum</span><br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
        	           Lorem ipsum<br />
    	        <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
            <div id="anschrift3">
	            <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                <a href="Lorem ipsum">Lorem ipsum</a><br />
            </div>
        </div>
    und hier das CSS dazu:

    Code:
    #content_area {
height : 360px;
width : 100%;
background-color : #ffffff;
}

#content_left {
width : 460px;
height : 360px;
padding : 20px;
float : left;
}

#content_box_1 {
height : 160px;
width : 100%;
}

#content_box_1_image {
background-image : url("../images/content_box_1_image.png");
background-repeat : no-repeat;
width : 138px;
height : 140px;
margin-right : 20px;
float : left;
}

#content_box_1_text {
float : right;
width : 300px;
}

#content_box_2 {
height : 160px;
width : 100%;
background-color : #e0f7b3;
}

#content_box_2_text {
width : 330px;
float : left;
margin-top : 5px;
margin-left : 5px;
}

#content_box_2_menu {
width : 120px;
height : 160px;
color : #ffffff;
float : right;
}

.zelle {
height : 22px;
border-bottom : 1px solid #ffffff;
padding-left : 5px;
}

.zelle2 {
height : 22px;
padding-left : 5px;
}

.zelle a {
color : #ffffff;
text-decoration : none;
}

.zelle a:hover {
text-decoration : underline;
}

.zelle2 a {
color : #ffffff;
text-decoration : none;
}

.zelle2 a:hover {
text-decoration : underline;
}

#content_right {
width : 200px;
height : 360px;
background-color : #f6f7e9;
float : right;
}

#content_right_text {
margin-top : 90px;
margin-left : 20px;
margin-right : 20px;
}

#grey_stripe {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #333333;
}

#footer {
height : 100px;
width : 100%;
background-color : #333333;
}

#anschrift1 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;

margin-top : 10px;
margin-left : 20px;
margin-right : 40px;

float : left;
border : 1px solid #fff;
}

#anschrift2 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
margin-right : 40px;
float : left;
border : 1px solid #fff;
}

#anschrift3 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
float : left;
border : 1px solid #fff;
}
    Danke schon im Vorraus für die Hilfe!
    Zitieren Zitieren
  2. 05-08-2008, 15:41 #2
    hidingmyfame
    hidingmyfame ist offline Jungspund
    registriert
    08-07-2008
    Beiträge
    17

    AW: Problem mit float und clear

    Nachtrag:

    Mit absoluter Positionierung bekomme ich das Problem in den Griff,
    allerdings ist das ja gerade auch in Hinsicht auf Barrierefreiheit nicht das wahre...
    Zitieren Zitieren
  3. 05-08-2008, 16:31 #3
    Avatar von dkdenz
    dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: Problem mit float und clear

    Sollen wir uns das selbst zusammen bauen?
    http://forum.jswelt.de/css-x-html/26...tellungen.html (Bitte lesen! Vereinfachung von Hilfestellungen.)
    Dirk Klar - Webdesign Lübeck
    Twitter
    G+
    Zitieren Zitieren
  4. 05-08-2008, 16:52 #4
    hidingmyfame
    hidingmyfame ist offline Jungspund
    registriert
    08-07-2008
    Beiträge
    17

    AW: Problem mit float und clear

    Hallo dkdenz,

    oh Entschuldigung. Dann poste ich jetzt nochmal den kompletten Quelltext, evtl. ist es dann sowieso besser nachvollziehbar.
    Ich habe die betreffenden Codezeilen in Fett hervorgehoben.

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  	<meta name="robots" content="index, follow" />
    <meta name="keywords" content="xyz" />
  	<meta name="description" content="xyz" />
    
    <title>:: xyz ::</title>
    
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    
    <script type="text/javascript">
    <!--			
    window.defaultStatus = ":: xyz ::";
    -->
    </script>
</head>

<body>
	<div id="border">
    	<div id="top">
        	<div id="logo"></div>
            <div id="navigation">
                <table border="0" cellspacing="0" cellpadding="0" class="mainmenu">
                  <tr>
                    <td style="width: 101px;"><a href="#">Unternehmen</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Leistungen</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Ihr Team</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Service</a></td>
                    <td style="width: 1px;" class="trennstrich"></td>
                    <td style="width: 101px;"><a href="#">Kontakt</a></td>
                  </tr>
                </table>
            </div>
      </div>
        <div id="green_stripe_bright"></div>
        <div id="head_gradient">
        	<div id="head_form_left"></div>
            <div id="head_form_right"></div>
            <div id="head_bild"></div>
            <div class="clear"></div>
        </div>
        <div id="green_stripe_dark"></div>
            <div id="content_area">
        	<div id="content_left">
            	<div id="content_box_1">
                	<div id="content_box_1_image"></div>
					<div id="content_box_1_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                    
                   </div>                                    
                </div>
                <div id="content_box_2">
                	<div id="content_box_2_text">
                        <span class="heading">Lorem ipsum</span><br />
                        <br />
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. 
                        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.                    
                    </div>
                    <div id="content_box_2_menu">
                    	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%; background-color: #8dc73d;">
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        	<tr>
                            	<td class="zelle2"><a href="#">Lorem ipsum</a></td>
                            </tr>
                        </table>
                    </div>                
                </div>
                <div class="clear"></div>
            </div>
            <div id="content_right">
            	<div id="content_right_text">
            		<span class="heading">Lorem ipsum</span><br />
                    <br />
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor. 
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.                
                </div>
                <div class="clear"></div>
            </div>   
        </div>            
        <div id="grey_stripe"></div>
        <div id="footer">
        	<div id="anschrift1">
                <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
               Lorem ipsum<br />
                <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
			<div id="anschrift2">
            	<span class="bold">Lorem ipsum</span><br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
            	Lorem ipsum<br />
        	           Lorem ipsum<br />
    	        <a href="mailto:Lorem ipsum">Lorem ipsum</a><br />
            </div>
            <div id="anschrift3">
	            <span class="bold">Lorem ipsum</span><br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                Lorem ipsum<br />
                <a href="Lorem ipsum">Lorem ipsum</a><br />
            </div>
        </div> 
    </div>
</body>
</html>
    CSS:
    Code:
    @charset "utf-8";

body, html {
font-family : Calibri, Arial, Tahoma, Verdana;
background-image : url(../images/wood.jpg);
font-size: 100.01%;
}

#border {
height : 100%;
width : 700px;
border : 1px solid #000000;
background-color : #ffffff;
margin-left : auto;
margin-right : auto;
position : relative;
}

#top {
width : 100%;
height : 60px;
background-color : #ffffff;
}

#logo {
height : 43px;
width : 190px;
margin-left : 10px;
margin-top : 10px;
background-image : url("../images/logo.png");
background-repeat : no-repeat;
float : left;
}

#navigation {
font-family : Arial, Tahoma, Verdana;
color : #8ab54a;
font-weight : bold;
font-size: 0.75em;
height : 100%;
width : 50%;
float : right;
}

.mainmenu {
display : block;
text-align : center;
height : 29px;
position : absolute;
right : 0;
top : 31px;
line-height : 250%;
}

.mainmenu a:link {
display : block;
height : 29px;
margin-top : auto;
margin-bottom : auto;
color : #8dc73f;
background-color : #ffffff;
text-decoration : none;
}

.mainmenu a:hover {
display : block;
height : 29px;
color : #ffffff;
background-color : #8dc73f;
text-decoration : none;
}

.trennstrich {
background-image : url("../images/trennstrich.png");
background-repeat : repeat-y;
}

#green_stripe_bright {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #8dc73f;
}

#head_gradient {
background-image : url("../images/head_gradient.png");
background-repeat : repeat-x;
height : 200px;
}

#head_form_left {
margin-top : 18px;
background-image : url("../images/head_form_left.png");
background-repeat : no-repeat;
height : 182px;
width : 170px;
float : left;
}

#head_form_right {
background-image : url("../images/head_form_right.png");
background-repeat : no-repeat;
height : 199px;
width : 371px;
float : right;
margin-right : 10px;
}

#head_bild {
z-index : 2;
background-image : url("../images/head.png");
background-repeat : no-repeat;
height : 268px;
width : 295px;
position : absolute;
right : 20px;
top : 80px;
}

.clear {
clear : both;
}

#green_stripe_dark {
height : 2px;
width : 100%;
margin-top : 1px;
background-color : #017342;
}

#content_area {
height : 360px;
width : 100%;
background-color : #ffffff;
}

#content_left {
width : 460px;
height : 360px;
padding : 20px;
float : left;
}

#content_box_1 {
height : 160px;
width : 100%;
}

#content_box_1_image {
background-image : url("../images/content_box_1_image.png");
background-repeat : no-repeat;
width : 138px;
height : 140px;
margin-right : 20px;
float : left;
}

#content_box_1_text {
float : right;
width : 300px;
}

#content_box_2 {
height : 160px;
width : 100%;
background-color : #e0f7b3;
}

#content_box_2_text {
width : 330px;
float : left;
margin-top : 5px;
margin-left : 5px;
}

#content_box_2_menu {
width : 120px;
height : 160px;
color : #ffffff;
float : right;
}

.zelle {
height : 22px;
border-bottom : 1px solid #ffffff;
padding-left : 5px;
}

.zelle2 {
height : 22px;
padding-left : 5px;
}

.zelle a {
color : #ffffff;
text-decoration : none;
}

.zelle a:hover {
text-decoration : underline;
}

.zelle2 a {
color : #ffffff;
text-decoration : none;
}

.zelle2 a:hover {
text-decoration : underline;
}

#content_right {
width : 200px;
height : 360px;
background-color : #f6f7e9;
float : right;
}

#content_right_text {
margin-top : 90px;
margin-left : 20px;
margin-right : 20px;
}

#grey_stripe {
height : 2px;
width : 100%;
margin-bottom : 1px;
background-color : #333333;
}

#footer {
height : 100px;
width : 100%;
background-color : #333333;
}

#anschrift1 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;

margin-top : 10px;
margin-left : 20px;
margin-right : 40px;

float : left;
border : 1px solid #fff;
}

#anschrift2 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
margin-right : 40px;
float : left;
border : 1px solid #fff;
}

#anschrift3 {
width : 140px;
height : 80px;
font-family : Cambria, Arial, Tahoma, Verdana;
font-size : 11px;
color : #8e8f93;
margin-top : 10px;
float : left;
border : 1px solid #fff;
}

/* Textformatierungen */

h1 {
font-family : Cambria, Arial, Tahoma, Verdana;
font-size: 1.0em;
font-weight : bold;
color : #8ab54a;
padding: 0;
margin: 0;
}

p {
	font-size: 0.75em;
}

.bold {
font-weight : bold;
}
    Danke!
    Geändert von hidingmyfame (05-08-2008 um 16:57 Uhr)
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. Problem mit CSS "position:absolute" mit JS
    Von bossi im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 25-03-2005, 10:45
  2. layer problem mit Firefox: Carolina braucht Hilfe
    Von carolina im Forum JavaScript
    Antworten: 25
    Letzter Beitrag: 11-03-2005, 15:28
  3. IE Problem mit crossbrowsermarquee + Prob beim externen Einbinden - 15 € Belohnung
    Von isnichwahr.de im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 28-02-2005, 18:50
  4. Problem beim kombinieren zweier Scripte
    Von thundervirus im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 17-01-2005, 13:28
  5. Total obskures Problem ...
    Von Dyonisus im Forum Windows
    Antworten: 4
    Letzter Beitrag: 06-05-2002, 12:10

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln