Div Breite ändert sich nicht @ tutorials.de: Tutorials, Forum & Hilfe

Anny83 · 01.07.08 10:24

Hallo,

muss meine Website gerade umbauen, damit sie immer zentriert sitzt.
Also bau ich gerade alles mit Hilfe von CSS auf.
Jetzt habe ich das Problem, dass ich links einen blauen Balken haben möchte, der nur 30px breit ist. Er wird aber viel länger angezeigt? Fehlt mir das clear... zum Aufheben?

Hier der CSS Code:

@charset "utf-8";

* {
margin:0;
padding:0 }

html, body {
height:100%;
}

body {
background-color:#ffffff;
font:100.01%/1.4 sans-serif;
text-align:left; /* horizontal centering for IE Win quirks */
}

#container {
margin: 0 auto;
position:relative;
text-align:left;
width: 850px;
height: 750px;
background-image: url(Bilder/hg_header.jpg);
background-repeat: no-repeat;

}

#blau {
margin: 0;
float: left;
margin-top: 6px;
width: 2em;
height: 120Px;
background-color: #3c2a85;
}

#container div {
font-size:80%;
float:left;
width:60em;
margin-left:2em;
text-decoration: none;
text-align: center;
}

#container ul {
margin-left:100;
list-style-type: none;
text-decoration: none;
padding-top:15em;
margin-left:3em;
}

#container ul li{
display: inline;
}

#container li span {
font-size:70%;
}

under der HTML Code:

<div id="container">
<div id="container ul">
<ul>
<li><a href="empfang.html" class="link_active"> Empfang </a> </li>
                &nbs p;         
<li><a href="agentur.html" class="link">Agentur </a> </li>
                &nbs p;         
<li><a href="leistungen.html" class="link">Leistungen </a> </li>
                &nbs p;         
<li><a href="referenzen.html" class="link">Referenzen </a> </li>
                &nbs p;         
<li><a href="kontakt.html" class="link"> Kontakt</a> </li>
</ul>
</div>

<div id="blau"></div>

</div>

Findet Ihr mein Problem

Lg Anny

Maik · 01.07.08 12:14

Hi,

dein Problem liegt auf den ersten Blick darin, dass du im HTML-Code ein DIV mit der ID #container ul auszeichnest, obwohl diese "Namenskonstellation" im Stylesheet den Selektor für Nachfahren repräsentiert, also für das ul-Element innerhalb eines Elements mit der ID #container gilt.

Zum anderen vermischt du absolute Breiten (px) mit relativen Breiten (em), was äußerst ungünstig ist, und diese Regel:

Code :

#container div {
font-size:80%;
float:left;
width:60em;
margin-left:2em;
text-decoration: none;
text-align: center;
}

wird auf den "blauen" Balken angewendet, womit er breiter, als gewünscht, dargestellt wird.

mfg Maik

Anny83 · 01.07.08 16:47

Hi Maik,

habe deine Tipps umgesetzt, danke, aber warum wird "blau" auf den "container div" angewendet?
Habe die Breite, die ich wollte hinbekommen, aber ich kann ihn nicht einzeln nach unten verschieben. Woran liegt das?

lg Anny

Maik · 01.07.08 16:50

Der CSS-Selektor "#container div" hat für alle div-Elemente Gültigkeit, die sich in einem Element mit der ID #container befinden, und dazu zählt eben auch das DIV #blau.

Was meinst du mit "einzeln nach unten verschieben", und womit hast du es erfolglos versucht?

mfg Maik

Anny83 · 01.07.08 17:05

Habe den #container div nun umbenannt in #navi.
Wie gesagt die Breite kann ich jetzt regeln, aber ich kann den blauen Balken nicht nach unten schieben wie ich will. Über dem Balken ist die Navigation. Aber wenn ich bei margin-top die Höhe verändere, verschiebt sich alles...

Maik · 01.07.08 17:07

Zeig doch bitte mal den aktuellen vollständigen HTML- und CSS-Code der Seite.

mfg Maik

Anny83 · 01.07.08 17:14

wie kann ich den Code eigentlich hostet, dass er in dem kleinen Fenster zu sehen ist

Maik · 01.07.08 17:17

Hierfür gibt es diverse Tags, wie z.B.:

[code] ... [ /code], [css] ... [ /css], [html] ... [ /html], [javascript] ... [ /javascript], [php] ... [ /php] (ohne Leerzeichen vor dem Schrägstrich)

Im erweiterten Editor findest du drei Buttons, um den Quellcode zu maskieren:

Div Breite ändert sich nicht-texteditor.jpg

mfg Maik

Loomis · 01.07.08 17:19

Gibt extra Tags dafür:

Div Breite ändert sich nicht-forum_tags.jpg

//edit: Maiks Bild ist natürlich viel gewissenhafter gemacht, als meins.

Maik · 01.07.08 17:32

Zitat von Loomes

//edit: Maiks Bild ist natürlich viel gewissenhafter gemacht, als meins.

_____________________________________________________________
Geändert von Loomes (01.07.08 um 17:21Uhr). Grund: ich = lahmarsch

Danke

Mein zeitlicher Vorsprung gegenüber deinem Post hat einen einfachen Grund: Den "Prototyp" dieses Schnapp-Schußes hab ich schon vor langer Zeit aus aktuellem Anlaß erstellt, und direkt im Anschluß ein Backup gestartet, da diese Frage in gewissen Abständen im Forum immer wieder auftaucht.

mfg Maik

Anny83 · 01.07.08 19:46

Hi Maik,

ich schick dir morgen den Code, hab zuhasue kein Zugriff auf die Daten vom Geschäft.
Schönen abend noch

Anny83 · 02.07.08 09:10

Guten morgen,

hier nun der Html Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Test </title>
<link href="frank_css_2.css" rel="stylesheet" type="text/css" />
<link href="frank_css.css" rel="stylesheet" type="text/css" />


<style type="text/css">
<!--
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style></head>

<body>

	<div id="container">
    	<div id="navi">
  <ul>        
 <li><a href="empfang.html" class="link_active"> Empfang </a> </li> 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <li><a href="agentur.html" class="link">Agentur </a> </li>         
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <li><a href="leistungen.html" class="link">Leistungen </a> </li>   
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <li><a href="referenzen.html" class="link">Referenzen </a> </li>   
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <li><a href="kontakt.html" class="link"> Kontakt</a> </li>
 </ul>
 </div>
 
 
 <div id="blau"> </div>
 
 <div id="blau2"> </div>
 
 <h1> Im Zeichen des Chamäleons </h1>
 
 <p> Ein Chamäleon ist anpassungsfähig und vielfältig.  <br />
Darum führen wir es im Logo. Denn wir erfüllen Ihre individuellen <br>
Marketing- und Werbewünsche. Wir ergründen Ihre Anforderungen, <br>
machen sie uns zu eigen und setzen sie überzeugend für Sie um. <br>
Bestens abgestimmt auf Ihre Aufgaben, Ihren Markt, Ihre Möglichkeiten. <br>
Das nennen wir: Die Zukunft im Ursprung gestalten.<br> 
Immer wieder aufs Neue. Wie ein Chamäleon.<br>
<br>

<f> Willkommen bei Frank & Konsorten. </f> </p>
 </div>

</body>
</html>

und der CSS Code:

Code css:

@charset "utf-8";
 
* {
        margin:0;
        padding:0;
        }
 
    html, body {
        height:100%;
        }
 
    body {
        background-color:#ffffff;
        font:100.01%/1.4 sans-serif;
        text-align:left; /* horizontal centering for IE Win quirks */
        }
 
 
    #container {
        margin: 0 auto;
        position:relative;
        text-align:left;
        width: 850px;
        height: 750px;
        background-image: url(Bilder/hg_header.jpg);
        background-repeat: no-repeat;
        }
        
    #container h1 {
        font-size:15px;
        padding-top:26px;
        margin-left:100px;
        color: #b8c100;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        }
    
    #container p {
        font-size:11px;
        padding-top:26px;
        margin-left:100px;
        color: #333333;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        }
        
    #container f {
        font-size:11px;
        padding-top:200px;
        margin-left:0px;
        color: #333333;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        }   
    
    #blau {
        margin: 0;
        clear: left;
        margin-left:26px;
        margin-top: 200px;
        width: 30px;
        height: 120Px;
        background-color: #3c2a85;
        
        }
    
    #blau2 {
        margin: 0;
        clear: left;
        margin-left:797px;
        margin-top: -120px;
        width: 30px;
        height: 120Px;
        background-color: #3c2a85;
        
        }   
            
 
    #navi {
        font-size:80%;
        float:left;
        width:800Px;
        margin-left:30Px;
        text-decoration: none;
        text-align: center;
        margin-left:100;
        list-style-type: none;
        text-decoration: none;
        padding-top:185px;
        }
 
    #navi ul li{
        display: inline;
        }   
 
    #navi li span {
        font-size:70%;
        }

Siehst du woran es liegt?

Maik · 02.07.08 12:28

Hi,

setz mal diese Regeln für die beiden blauen Balken ein:

Code :

        #blau {
                margin: 0;
                float:left;
                display:inline;
                position:relative;
                margin-left:26px;
                top: 200px;
                width: 30px;
                height: 120px;
                background-color: #3c2a85;
                }
 
        #blau2 {
                margin: 0;
                float:right;
                display:inline;
                position:relative;
                top: 200px;
                width: 30px;
                height: 120px;
                background-color: #3c2a85;
                }

mfg Maik

Anny83 · 04.07.08 15:51

Bei ersten blau hat es funktioniert nur bekomm ich das Zweite weder nach noch nach rechts verschoben....

Maik · 04.07.08 16:22

Zitat von Anny83

nur bekomm ich das Zweite weder nach ... noch nach rechts verschoben....

... wohin?

Nach rechts dürfte sich in diesem Fall als "Mission Impossible" erweisen, da sich #blau2 schon am rechten Rand des DIVs #container befindet:

Div Breite ändert sich nicht-demo_anny83.jpg

Ansonsten kann ich die Blöcke nach Belieben innerhalb von #container verschieben, und wie unschwer in dem Schnappschuß zu erkennen ist, wurde auch der Block #blau2 mit meinem Vorschlag nach unten verschoben.

Vielleicht solltest du hier mal einen Preview posten, aus dem der gewünschte Soll-Zustand des Layouts deutlich hervorgeht, damit man als Außenstehender überhaupt nachvollziehen kann, wohin die Reise gehen soll.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Textgröße ändert sich nicht.

MC- Warum ändert sich der Wert nicht?

TabControl Breite der Tabs ändert sich nicht

hintergrund bild ändert sich nicht

Variable ändert sich nicht

E-Mail:

Abonnieren Abbestellen