1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

CSS Positionierung

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von wapplegraph, 06.12.06.

  1. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Bei der CSS Positionierung, habe ich irgend einen groben Knopf.

    Bei der Positionierung, nebeneinander klappt es einnfach nie.
    Habe in einem div 750px breit, dieses div ist bei dem programierten nicht zu sehen, da das Programmierte, mit PHP eingefügt wird.

    Nun links eine Ebene mit 2 Ebenen und rechts ein Bild sollte alles nebeneinander sein.
    Habe vieles ausprobiert, nun musste ich für das linke div mir mit position:absolute behelfen, doch ich bringe diese zwei divs nicht nebeneinander, mein Erfolg wenigstens nicht untereinander, aber übereinander.

    Code:
    img#homebackimg	{
    padding-left:358px;
    width:392px;
    height:496px;
    }
    
    
    div#adresse	{
    	position:absolute;
    	top:268px;
    	left:25%;
    	height:200px;
    	width:540px;
    	color:#FFCC00;
    	border:3px #000000 solid;
    	z-index:7;
    }
    
    div#adresse	div	{
    position:absolute;
    margin:10px 10px;
    
    }
    
    Code:
    <img src="image/homeback1.jpg" id="homebackimg" />
    
    <div id="adresse">
    		<div> Brandriedstrasse 38 <br />
    				CH-8307 Effretikon<br />
    				<br />
    				Filiale:<br />
    				Seetalstrasse 56<br />
    				5706 Boniswil<br />
    				<br />
    				Showroom:<br />
    				Safenwilerstrasse23<br />
    				5742 Kölliken<br />
        	</div>
    		<div>
    				052 343 80 60 Tel.<br />
       				052 343 80 88 Fax<br />
      				<a href="mailto:info@sunel.ch">info@sunel.ch</a><br />
    				<br />
    				062 777 21 21 Tel.<br />
    				062 777 00 43 Fax<br />
    				<a href="mailto:info@sunel.ch">info@sunel.ch</a>
    		
    		</div>
    </div>
    Wo liegt mein schwerwiegendes Problem?

    Der Witz: sieht nur bei Safari einigermassen so aus. Und online ist ein riesen Cako!

    Ich bin am verzweifeln!

    Hier noch der Code vom Index und Stylesheet
     
  2. Valou

    Valou Rhode Island Greening

    Dabei seit:
    07.10.06
    Beiträge:
    479
    Versuch es mal mit float. du musst beide divs floaten lassen. float:left; das eine float:right; das andere. Entschuldige das ich es nicht besser erklären kann bin kein Webdesignprofi.

    Gruß aus Hamburg
     
  3. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Ne das hat nichts bewirkt, sie sind immer noch übereinander.

    wapplegraph
     
  4. MacMoneysuck

    Dabei seit:
    24.10.06
    Beiträge:
    36
    Hallo,

    also so ganz versteh ich nicht was du meinst, sonst könnte ich dir konkreter helfen.
    Ich versuchs mal allgemein.
    Also du willst zwei Ebenen nebeneinander platzieren, dann geht das zum einen mit position: absolute; wichtig ist die Positionsangabe

    Code:
    #ebenelinks{position: absolte; 
    left 5px; 
    top 5px;
    width: 400px;}
    
    #ebenerechts{position: absolte; 
    left 410px; 
    top 5px;
    width: 400px;}
    im html sieht das dann so aus:
    Code:
    <div id="drumherum">
    <div id="ebenelinks">blabla</div>
    <div id="ebenerechts">bild drin</div>
    </div>
    
    Der Ebenen "drumherum" weist du noch ein position:relative zu, damit die absolut positionierten Ebenen auch fein mitscrollen.

    Eine andere Möglichkeit wäre, mit floats zu arbeiten, bei gleichen html-code wie oben gezeigt, müsste der ebenelinks ein float: left zugewiesen werden in der css-datei. Vorraussetzung damit das funktioniert, ist allerdings: das position: absolute muss weg in beiden ebenen und genügend Platz in der Ebene "drumherum" muss gegeben sein.

    Ich hoffe, ich habe mich einigermaßen verständlich ausgedrückt.


    hilfreich ist es, gerade beim arbeiten mit CSS ist es, sich andere Seiten anzuschauen, wie die es gemacht haben, hilfreich dabei ist der Firefox und das Add-on Web Developer Toolbar, mit der man direkt im Browser eingebundene CSS-Dateien öffnen und sogar live bearbeiten kann.

    Ansonsten gibts auch zahlreiche CSS-Foren und Beispielseiten im Netz, wo du bei solchen Fragen besser aufgehoben bist.
    Auch gibt es einige gute Websites zum Thema:

    [SIZE=-1]www.cssplay.co.uk/[/SIZE]
    http://css.fractatulum.net/
    http://www.lipfert-malik.de/webdesign/tutorial/css.html



    um nur ein paar zu nennen...

    Gruß
    Macmomeysuck
     
  5. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Merci Macmomeysuck

    Hast mir geholfen!
    Sie stehen jetzt nebeneinander.
    Ohne float, dies hat irgendwie nicht geklappt.

    Eine Frage, warum verhalten sich die Ebene hier mit der position:absolute zum Aussenrand der Ebene und das äussere div absolute zum Fensterrand, obwohl es dann wiederum in einem div verschachtelt ist?

    Die Ebene #adresse Verhält sich jetzt halt anders mit dem Abstand, zum Rand als der Rest, da sie absolute positioniert ist und nicht ins div eingebunden ist, doch mit dem kann ich leben.

    wapplegraph
     
  6. MacMoneysuck

    Dabei seit:
    24.10.06
    Beiträge:
    36
    Die Positionsangaben von absoluten Ebenen beziehen sich immer auf die nächste relativ oder absolut positionierte umschließende Ebene.
    Wenn keine umschließende Ebene absolut oder relativ positioniert ist, gilt als Referenz fü die Position das body-tag, dass ja meisten den ganzen Bildschirm abdeckt.

    Wenn deine Abstände nicht ganz stimmen, kannst du diese mit margin (=Außenbabstand) und padding (=Innenabstand) korrigieren.

    Und wie gesagt, viel bei anderen Websites umschauen, wie es da gelöst wurde.
    Denn bei CSS führen meistens mehrere Wege zum Ziel, die alle vor oder Nachteile haben.

    Da hilft eigentlich nur viel, viel üben und schauen.

    Gruß
    MacMoneysuck
     
  7. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Merci!
     

Diese Seite empfehlen