zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-Box-Issue

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2015, 05:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2013
Beiträge: 5
fikxi befindet sich auf einem aufstrebenden Ast
Standard CSS-Box-Issue

Und zwar hab ich folgendes Problem.
Ich möchte gerne folgendes Box-Modell verwenden, doch die Box #3 spinnt rum und will nicht nach oben an den Rand von Box #2. Das Problem bei der ganzen Sache. Box #2 ist immer unterschiedlich hoch. Manchmal größer und manchmal eben kleiner als Box #1.

HTML-Code:
<!doctype html>
<link href="style.css" rel="stylesheet" type="text/css">
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="template">
<div id="main1">test1</div>
<div id="main2">test2</div>
<div id="main3">test3</div>
<div id="main4">test4</div>
</div>
</body>
</html>
PHP-Code:
@charset "utf-8";
/* CSS Document */

#template {
    
height:1000px;
    
width:650px;
    
float:left;}

#main1 {
    
width:350px;
    
height:250px;
    
background-color:#BBBBBB;
    
float:left;
    
border:2px #000 solid;}
    
#main2 {
    
width:250px;
    
height:150px;
    
background-color:#BBBBBB;
    
float:left;
    
border:2px #000 solid;}
    
#main3 {
    
width:350px;
    
height:250px;
    
background-color:#BBBBBB;
    
float:left;
    
border:2px #000 solid;}
    
#main4 {
    
width:250px;
    
height:250px;
    
background-color:#BBBBBB;
    
float:left;
    
border:2px #000 solid;} 
Jemand eine Idee, wie ich das lösen kann?
Irgendwie bin ich auf der falschen Spur.

Danke
fikxi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.01.2015, 09:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Hallo,

soll das dritte div sozusagen direkt unter dem zweiten sitzen? Falls ja, wurde die gleiche Thematik hier diskutiert:

http://xhtmlforum.de/71646-element-f...erbrechen.html

Und dann wirst du wohl mit Spalten arbeiten müssen.. d.h. div 2 und 3 müssen in der gleichen Spalte sein.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2015, 01:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2013
Beiträge: 5
fikxi befindet sich auf einem aufstrebenden Ast
Standard

Danke, habs mir kurz angeschaut und werds ausprobieren. Meld mich dann hier nochmal, für die Nachwelt.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.01.2015, 03:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2013
Beiträge: 5
fikxi befindet sich auf einem aufstrebenden Ast
Standard

So, hab die Möglichkeit mit dem clear:right/left ausprobiert, aber mit divs funktioniert das irgendwie nicht. Hat jemand von euch ne Lösung die auch mit Boxen funktioniert?

Danke!!
Mit Zitat antworten
  #5 (permalink)  
Alt 22.01.2015, 12:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Das hat aber nichts damit zu tun, dass es div-Boxen sind. Könntest du dein Ergebnis mal posten?
Mit Zitat antworten
  #6 (permalink)  
Alt 22.01.2015, 12:46
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fikxi Beitrag anzeigen
funktioniert das irgendwie nicht.
Eine tolle Fehlerbeschreibung
Mit Zitat antworten
  #7 (permalink)  
Alt 23.01.2015, 01:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2013
Beiträge: 5
fikxi befindet sich auf einem aufstrebenden Ast
Standard

Ja, ne dolle Fehlerbeschreibung wars nicht.
Weiss einfach nicht was für ein Fehler es ist.
Sah/sieht einfach falsch aus.

Hier mal mein 'neuer' Code.

HTML-Code:
<!doctype html>
<link href="1.css" rel="stylesheet" type="text/css">
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="template">
<div id="main1">test1</div>
<div id="main2">test2</div>
<div id="main3">test3</div>
<div id="main4">test4</div>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */

#template {
	height:1000px;
	width:550px;
	float:left;}

#main1 {
	width:250px;
	height:250px;
	background-color:#BBBBBB;
	float:left;
	clear:left;
	border:2px #000 solid;}
	
#main2 {
	width:250px;
	height:150px;
	background-color:#BBBBBB;
	float:right;
	clear:right;
	border:2px #000 solid;}
	
#main3 {
	width:250px;
	height:250px;
	background-color:#BBBBBB;
	float:left;
	clear:left;
	border:2px #000 solid;}
	
#main4 {
	width:250px;
	height:250px;
	float:right;
	clear:right;
	background-color:#BBBBBB;
	border:2px #000 solid;}

danke
fikxi
Mit Zitat antworten
  #8 (permalink)  
Alt 23.01.2015, 20:54
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

fikxi, was ist denn die eigentliche Frage, bzw. könntest Du mal erläutern was "nicht richtig aussieht" und wo du gerne Änderungen haben willst ?

Im ersten Post sagtest du "... Box #2 ist immer unterschiedlich hoch ...", aber im CSS hast du für Box2 (#main2) eine Höhe angegeben - entweder keine Höhe angeben damit es selbst anpasst, oder Höhe angeben aber nicht erwarten dass sie sich anpasst.
Mit Zitat antworten
  #9 (permalink)  
Alt 24.01.2015, 01:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.12.2013
Beiträge: 5
fikxi befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Toro Beitrag anzeigen
fikxi, was ist denn die eigentliche Frage, bzw. könntest Du mal erläutern was "nicht richtig aussieht" und wo du gerne Änderungen haben willst ?

Im ersten Post sagtest du "... Box #2 ist immer unterschiedlich hoch ...", aber im CSS hast du für Box2 (#main2) eine Höhe angegeben - entweder keine Höhe angeben damit es selbst anpasst, oder Höhe angeben aber nicht erwarten dass sie sich anpasst.
Ok, ich hab hier mal ein Screenshot hochgeladen:



Wie man gut erkennen kann, ist die vierte box auf der selben Höhe wie die dritte box. Ich möchte jedoch, das die vierte box nach oben rutscht und an die box#2 heranrutscht. Dies hab ich versucht, aber nicht hinbekommen.

Danke für Eure Hilfe!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 24.01.2015, 12:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von fikxi Beitrag anzeigen

Wie man gut erkennen kann, ist die vierte box auf der selben Höhe wie die dritte box. Ich möchte jedoch, das die vierte box nach oben rutscht und an die box#2 heranrutscht. Dies hab ich versucht, aber nicht hinbekommen.
so vielleicht: Edit fiddle - JSFiddle

____________
MfG Roland
Mit Zitat antworten
Sponsored Links
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
HotSpot-Verweis auf CSS Box tray-park CSS 11 03.09.2008 21:57
ie 7 - menu css - a:hover behaviour only on text not on the whole box sycorax27 CSS 1 18.06.2007 23:34
ps design (slices), php (dynamischer inhalt), css gestaltung schleepy CSS 19 02.06.2006 23:46
bewegliche box mit css & js b166-er CSS 1 03.04.2006 16:30
Input box - verschiebt sich bei css formatierung ATooM CSS 5 05.04.2005 19:43


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:13 Uhr.