ABAKUS

Verfasst: **20.04.2012, 22:17**

Hallo,

ich als HTML / SEO / PHP Anfänger hab da mal ne Frage:

Ich hab ne Website, da "klebt" ein Div an der rechten Seite (über CSS: right: 50px;).

Wie kann ich sicherstellen, dass der Abstand nach Links nicht kleiner als bspw. 800px wird? Wie kann man also einen Mindestabstand nach Links verwirklichen?

EDIT:

Der Div ist über CSS definiert:

position:absolut;
margin-top: 50px;
right: 48px;
height: 250px;
width: 300px;

Gruß,
M2

Verfasst: **21.04.2012, 08:59**

Eine Seite würde ich so rechtsbündig ausrichten:

Code: Alles auswählen

<body>
<div style="margin-left&#58; auto; margin-right&#58; 20px">
Inhalt ...........
</div>
</body>

Einen Mindestabstand nach links kann man eigentlich nicht verwirklichen, da die Seite auf kleineren Ausgabegräten nicht mehr sichtbar wäre. Nur wer etwas verstecken möchte, wird zu Minuswerten greifen.

Code: Alles auswählen

<body>
<div style="width&#58; 800px; margin-left&#58; auto;  margin-right&#58; -820px">
Inhalt ...........
</div>
</body>

Alternativ bieten sich dann noch einige Möglichkeiten an, bei denen zum Beispiel die XY- Koordinaten abgefragt werden.

Verfasst: **21.04.2012, 15:58**

Danke für Deine Antwort.

Aber das funktioniert so leider nicht bei mir.
Ich dachte, dass es mit CSS3 nun eine Eigenschaft gibt, die den Mindestabstand nach Links regelt.
Habe aber leider auch nichts gefunden.

Content Erstellung von ABAKUS Internet Marketing
Ihre Vorteile:

einzigartige Texte
suchmaschinenoptimierte Inhalte
eine sinnvolle Content-Strategie
Beratung und Umsetzung

Jetzt anfragen: 0511 / 300325-0

Verfasst: **21.04.2012, 17:13**

Möglich ist so ziemlich alles, nur ich verstehe nicht, was Du eigentlich möchtest. Ein Mindestabstand erreicht man ja ganz einfach mit margin, doch der Rest muss ja irgendwo bleiben. Angenommen margin-left beträgt 800px, wo soll der Inhalt auf dem Display eines mobilen Endgerätes angezeigt werden?

Code: Alles auswählen

<body>
<div style="background-color&#58; green; margin-left&#58; 800px; margin-right&#58; 50px">
Inhalt......
</div>
</body>

Verfasst: **21.04.2012, 17:23**

Mach mal eine Skizze was du möchtest. Und versuche wenn möglich keine absoluten positionierungen zu verwenden.

Gruß Can

Verfasst: **22.04.2012, 08:02**

Guten Morgen.

Ich habe gestern noch ein wenig daran gebastelt und mich entschieden,
den Div auf der linken Seite zu platzieren. Somit wäre das also gelöst.

Was ich eigentlich vor hatte:

Wie man auf der recht professionellen Zeichnung sehen kann, gibt es auf der Website 2 Divs.
Eigentlich 3. Da, wo das Strichmännchen steht, ist der dritte Div. Dieser füllt die komplette Website aus. (height/width: 100%)
Die anderen zwei haben eine "position:absolut" inkl. z-index.

Div1:
margin-left: 70px;
margin-top: 50px;

Div2:
margin-right: 50px;
margin-top: 50px;

Das Problem ist natürlich jetzt, dass bei Veränderung der Auflösung oder bei einer Verkleinerung des Browserfensters sich die beiden Divs überlappen.

Aber wie gesagt, habe ich dies nun anderweitig gelöst. Div2 sitzt jetzt unterhalb Div1. Damit wäre mein Problem (und dieser Post) gelöst. Danke!

Würde mich natürlich freuen, wenn hier einer noch etwas zu zu sagen hätte.

Danke M2

Verfasst: **24.04.2012, 11:09**

Ich sag mal etwas dazu.

Also für dein Layout eignet sich die absolute Positionierung GAR nicht, was du suchst sind sog. FLOATS.

Erstmal eine Seite die du dir gleich abspeichern solltest:
css4you.de

Das vorgehen für dein Layout ist relativ simpel.

Es gibt einen "Wrapper" (umhüllt) der definiert die Breite deiner Seite.

Code: Alles auswählen

<div id="wrap">

</div> <!-- wrap ende // -->

in diesen Wrapper kommen nun deine einzelnen Seitenelemente.

Code: Alles auswählen

<div id="wrap">
	<div id="sidebar"> LINKE SPALTE </div> <!-- sidebar ende // -->
	<div id="header"> HEADER </div> <!-- header ende // -->
	<div id="content"> CONTENT </div> <!-- content ende // -->
</div> <!-- wrap ende // -->

Dann gehts ans css.

#wrap {width:960px; margin:auto;} (margin:auto; zentriert das ganze wenn eine feste Breite vergeben ist)

#sidebar {width:160px; float:left;height:800px;}

#header {width:800px; float:right; height:150px;}

#content {width:800px; float:right;}

Fertig.

Hier komplettes HTML mit Farben.

Code: Alles auswählen


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

* &#123; margin&#58;0; padding&#58;0; &#125;
#wrap &#123;width&#58;960px; margin&#58;auto;&#125; 

#sidebar &#123;width&#58;160px; float&#58;left; height&#58;800px;&#125;

#header &#123;width&#58;800px; float&#58;right; height&#58;150px;&#125;

#content &#123;width&#58;800px; float&#58;right;&#125;



/* Farben */

#sidebar &#123; background-color&#58;red;&#125;

#header &#123;background&#58;green;&#125;

#content &#123;background&#58;yellow;&#125;
</style>
</head>

<body>

<div id="wrap"> 
   <div id="sidebar"> LINKE SPALTE </div> <!-- sidebar ende // --> 
   <div id="header"> HEADER </div> <!-- header ende // --> 
   <div id="content"> CONTENT </div> <!-- content ende // --> 
</div> <!-- wrap ende // -->
</body>
</html>

Verfasst: **24.04.2012, 16:51**

Danke für Deine Mühe. Ist gar nicht mal schlecht. Was ich nicht verstehe:
Wie bekommst Du den Abstand rechts und links von LINKE SPALTE, HEADER und Content hin? Margin ist ja null.

was du suchst sind sog. FLOATS.

Den Ausdruck kannte ich in dem Zusammenhang noch nicht.

Verfasst: **24.04.2012, 19:31**

M2 hat geschrieben:Danke für Deine Mühe. Ist gar nicht mal schlecht. Was ich nicht verstehe:
Wie bekommst Du den Abstand rechts und links von LINKE SPALTE, HEADER und Content hin? Margin ist ja null.

was du suchst sind sog. FLOATS.
Den Ausdruck kannte ich in dem Zusammenhang noch nicht.

Der WRAP hat eine feste Breite von 960 Pixeln. Mit margin:auto; kann man ihn dann auf dem Bildschirm zentrieren.

Verfasst: **24.04.2012, 19:50**

D.h., margin:auto; zentriert alle Elemente innerhalb dieses Divs, richtig?
Halt mich, von mir aus, für sau dumm, aber das wusste ich nicht.

Mir war zwar bewusst, dass der Browser (bei margin:auto) den Abstand selbst berechnet,
jedoch wusste ich nicht, dass dies zu gleichen Teilen geschieht.
Ich bin mir ziemlich sicher, das schon mal getestet zu haben.
Jedoch hat das aus mir nicht bekannten Gründen nicht funktioniert.
Wahrscheinlich lag der Fehler VOR dem Bildschirm.
Egal, lieber lebend lernen, als dumm sterben. Danke!

Verfasst: **24.04.2012, 19:59**

M2 hat geschrieben:D.h., margin:auto; zentriert alle Elemente innerhalb dieses Divs, richtig?
Halt mich, von mir aus, für sau dumm, aber das wusste ich nicht.
Mir war zwar bewusst, dass der Browser (bei margin:auto) den Abstand selbst berechnet,
jedoch wusste ich nicht, dass dies zu gleichen Teilen geschieht.
Ich bin mir ziemlich sicher, das schon mal getestet zu haben.
Jedoch hat das aus mir nicht bekannten Gründen nicht funktioniert.
Wahrscheinlich lag der Fehler VOR dem Bildschirm.
Egal, lieber lebend lernen, als dumm sterben. Danke!

Ja also genau genommen nicht die Elemente innerhalb sondern den Div container selbst. Und er muss eine Breite haben damit es funktioniert.

Ach aller anfang ist schwer.

besorg dir Firebug und arbeite dich mal durch css4you.de durch, vor allem das BOXMODELL muss'te verstehen.
Gruß Can

Verfasst: **24.04.2012, 20:41**

vor allem das BOXMODELL muss'te verstehen.

Tja... was soll ich sagen. Ebenfalls nie gehört...

Und er muss eine Breite haben damit es funktioniert.

In Pixeln oder in Prozent? Oder Wurscht?

Danke!

Servus!

Verfasst: **13.05.2012, 13:23**

für die Divs würde ich am besten die css Eigenschaft float verwenden und anschließend nicht vergessen clear zu verwenden.

Wenn deine Seite optimal auch von mobile Geräten erreichbar sein soll, dann ist es besser das Layout in % anzugegebn.

ABAKUS

<div> mit Mindestabstand nach Links

<div> mit Mindestabstand nach Links