zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Gleiche Abstände zwischen Boxen?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2006, 19:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 2
Shepstar befindet sich auf einem aufstrebenden Ast
Frage Gleiche Abstände zwischen Boxen?

Vielleicht hat wer von euch eine Lösung.
Also ich hab 9 Boxen die dynamisch fortlaufend sein sollen und 3 Reihen a 3 Boxen sein sollen. Mein Problem ist das es im komplett im CSS sein soll und ich bei den Abständen ein Problem hab. Folgendes Beispiel hab ich mal schnell gemacht: http://www.sheppard.de/stuff/test.html
(im Beispiel nur 3 anstatt den 9 Boxen)

Die ganz linke Box sollte mit dem roten Rand abschliessen und die ganz rechte auch und dazwischen soll ein gleichmäßiger Rand sein.

Folgende Varianten funktioniert nicht:
Variante 1
mit "margin-left:10px" geht nicht weil dann der rechte Rand nicht gleichmässig abschließt.

Variante 2
mit "margin-right:10px" geht nicht weil dann der linke Rand nicht gleichmässig abschließt.

Variante 3
mit "margin-right:5px; margin-left:5px" geht nicht weil dann der linke und rechte Rand nicht gleichmässig abschließen.

Variante 4
zwei Stylesheets verwenden damit immer die ganz linken ein anderes verwenden geht auch nicht weil die neuen Boxen dynamisch hintereinander generiert werden.

Weiß jemand eine Lösung wie man im CSS sagen kann das er die 3 Boxen auf die Breite so verteilt das der Abstand zwischen den Boxen gleichmässig ist?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2006, 20:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

margin-left: 10px; geht, .page ist mit 330px einfach nur zu schmal. 3mal 100px plus 4 Außenabstände á 10px sind 340px.

In IE 6 und kleiner kommt dann noch der Double-Float-Margin-Bug, den man durch display: inline; für die floatenden divs behebt. Übrigens brauchen diese keine Klasse, sondern können über .page div angesprochen werden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2006, 22:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.07.2006
Beiträge: 2
Shepstar befindet sich auf einem aufstrebenden Ast
Standard

Hallo, vielleicht hab ich das Problem nicht ganz deutlich beschrieben. Ich möchte gerne das die drei Boxen (bzw. am Ende sollte es bei drei umbrechen und in der nächsten Zeile weitergehen damit insg. 9 entstehen) links und rechts ganz am Rand sind und gleicher Abstand zwischen Box 1 und Box 2 sowie Box 2 und Box 3 ist. Die Box 1 sollte ganz links am roten Rand sein und Box 3 ganz rechts am roten Rand sein.
Wichtig ist auch ich möchte "wenn möglich" nur ein Tag für alle 3 Boxen verwenden da diese dann ja dynamisch generiert werden das heißt alle 9 Boxen werden angezeigt und sollen nach 3 umbrechen.

Ich hoffe es ist jetzt etwas verständlicher ausgedrückt ich bräuchte also die Möglichkeit für einen CSS Tag der nur für die Abstände in der Mitte zwischen den Boxen einer Reihe zuständig ist bzw. diese darin gleichmässig verteilt und keinen Abstand links und rechts hinzufügt. Dennoch sollte dies mit nur einem Tag gemacht werden.
Ist natürlich möglich das ich mir was unmögliches vorstelle , wollte nur wissen ob dies möglich ist.
Mit Zitat antworten
  #4 (permalink)  
Alt 28.07.2006, 23:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Alles klar, das hatte ich falsch verstanden. Da fällt mir leider nur eine Lösung über eine zusätzliche Klasse ein, die Dir aber wohl nichts nützen wird. Die zusätzliche Klasse setzt dem jeweils letzten div in der Reihe den Abstand nach rechts wieder auf Null:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"><title>Test</title>
	<style type="text/css" media="screen"><!--

body {
	background-color: #fff;
	}

.page {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 320px;
	height: 110px;
	border: solid 1px #c00;
	}

.page div {
	background-color: #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 100px;
	height: 100px;
	float:left;
	}

.page .right {
	margin-right: 0;
	}

--></style>
</head>

<body>

	<div class="page">
		<div>box 1</div>
		<div>box 2</div>
		<div class="right">box 3</div>
	</div>

</body>

</html>

Geändert von heiko_rs (28.07.2006 um 23:03 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 28.07.2006, 23:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Vielleicht irgendwie so (wenig elegant)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    
    <title>xxx</title>
        
    <style type="text/css">
        .page   { 
            padding-top:10px;
            width: 330px; 
            border: solid 1px #c00;
            overflow:hidden;
            }

        .inner {
            width:345px;
            }

        .box { 
            background-color: #ccc; 
            width: 100px; 
            height: 100px; 
            float: left;
            margin:0 15px 10px 0;
            }

    </style>
</head>

<body>
	<div class="page">
		<div class="inner">
			<div class="box">box 1</div>
			<div class="box">box 2</div>
			<div class="box">box 3</div>
			<div class="box">box 4</div>
			<div class="box">box 5</div>
			<div class="box">box 6</div>
			<div class="box">box 7</div>
			<div class="box">box 8</div>
			<div class="box">box 9</div>
		</div>
	</div>
</body>

</html>

Geändert von fricca (28.07.2006 um 23:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 29.07.2006, 04:37
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Daumen runter

Superidee. An overflow hatte ich auch gedacht, aber nicht an das innere div, das den overflow "darstellt".

EDIT: Ups, der "Daumen runter" ist natürlich völlig fehl am Platze, der hat sich beim Tabben eingeschlichen.

Geändert von heiko_rs (29.07.2006 um 04:40 Uhr)
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
Problem mit display:table-cell in Safari... ungewollte Abstände zwischen Zellen awa CSS 5 16.02.2018 07:11
Abstände zwischen Untermenüpunkten in der Navi Tengu CSS 2 03.10.2009 10:42
Internet Explorer macht Abstände zwischen Bilder, wo keine hinsollen... fuhrheiner CSS 8 24.08.2006 17:55
Liste und Abstände zwischen li almighty7 CSS 3 30.05.2006 18:55
Boxen im Fluss - Leerraum zwischen Box im IE Geos CSS 2 16.04.2005 23:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:34 Uhr.