Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Dienstag, 11. Februar 2003, 15:39

Einen DIV rechts ausrichten.

Mit Text-Align kann man ja den Text innerhalb eines DIV-Containers ausrichten. Aber mit was soll ich den DIV-Container selber ausrichten?

2

Dienstag, 11. Februar 2003, 16:52

Sag mal bitte ein konkretes Beispiel, weil so kann ich mir das nicht wirklich gut vorstellen.

3

Dienstag, 11. Februar 2003, 19:45

vielleicht mit einer Tabelle?

ein Div-tag erstreckt sich normalerweise über die ganze breite (meines Wissens)

Kilian
Signatur von »kilian« Früher war ich

4

Dienstag, 11. Februar 2003, 19:48

Ein DIV ist ein Blocklevel-Element. Ein solches auszurichten ist ein anderer Vorgang als bei Inline-Elementen, bei denen das mit text-align gemacht wird. Zunächst solltest Du eine Breite angeben, denn Block-Elemente gehen normalerweise über die gesamte verfügbare Breite. Und dann experimentiere mit margin-left: auto, ich bin nicht sicher, ob es funktioniert, sollte aber. Teste dieses:

Quellcode

1
<div class="rechts">Diese Box sollte rechts stehen</div>

Quellcode

1
2
3
4
5
.rechts {
    width: 40%;
    margin-left: auto;
    margin-right: 1em;
}
Du solltest darauf achten, das möglichst standardkonform zu machen. Teste idealerweise in einem Gecko-Browser (oder vergleichbar gute; Mozilla, Netscape 7+, Phoenix, Opera 7, ...) und triggere ihn in den Standards compliance mode (IE dito, da aber eine möglichst neue Version verwenden). Vor einigen Tagen gab es hier einen Thread, da ging es ums Zentrieren von Block-Elementen. Schau auch da nochmal.

Viel Erfolg, HTH! :)
mem

5

Freitag, 29. November 2013, 11:07

Guten Morgen alle zusammen,

bin über Google zu euch gestoßen und dachte direkt hier wird mir geholfen - Halloooo erstmal :)

Ich wollte das Thema nochmal neu aufnehmen, da ich ein ähnliches Problem habe. Ich bin erst seit kurzem dran, mit CSS und HTML ein bisschen rumzuwerkeln und muss halt für meine Arbeit ein simples, dreispaltiges Layout erstellen.

Eins habe ich schon fertig, allerdings in der Kombination mit DIVs und TABLEs. Mein Vorgesetzter wünscht nur DIVs. So: Auf selfhtml gegangen und 3-spaltiges Layout nachgebastelt und ein wenig modifiziert.

Mein Problem ist nun der rechte DIV-Container und der Einzug passt nicht genau, habe schon viel mit margin und padding ausprobiert aber noch nie ein treffendes Ergebniss erzielt. Anbei werde ich einen Screenshot anhängen und den dazugehörigen Code.

Wäre echt supi, wenn ihr mir helfen könntet. Code darf natürlich sehr gerne umgeschrieben und optimiert werden :D

Muss leider das Logo etwas unkenntlich machen, da es für die Arbeit ist und natürlich noch nicht gelauncht ist.

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
	color: black;
	background: #feffff; /* Old browsers */
	background: -moz-linear-gradient(top, #feffff 30%, #c9dede 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #feffff), color-stop(100%, #c9dede)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #feffff 30%, #c9dede 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #feffff 30%, #c9dede 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #feffff 30%, #c9dede 100%); /* IE10+ */
	background: linear-gradient(to bottom, #feffff 30%, #c9dede 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#c9dede', GradientType=0 ); /* IE6-9 */
	background-attachment: fixed;
	font-size: 100.01%;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 1em;
	min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
#header {
	background-color: #FFF;
	border: 1px solid black;
}
div#Inhalt {
	padding: 0 1em;
	border: 1px dashed silver;
	position: static;
	background-color: #FFF;
	margin-bottom: 28em;
	margin-left: 28em;
	margin-right: 28em;
	margin-top: 0;
}
div#Inhalt p {
	font-size: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 1px;
	margin-top: 1em;
}
p#footer {
	clear: both;
	font-size: 0.9em;
	margin: 0;
	padding: 0.1em;
	text-align: center;
	background-color: lightblue;
	border: 1px solid black;
}
</style>
</head>
<body>
<div id="Inhalt">
<div id="header" align="right"><img src="../Logo123.gif" width="270"   alt=""/></div>
<div>
  <div style="width:33%; float:left; text-align:left; border:1px solid;">Links<br>
	<br>
	<br>
	<br>
	<br>
  </div>
  <div style="width:33%; float:left; text-align:left; border:1px solid;">Mitte<br>
	<br>
	<br>
	<br>
	<br>
  </div>
  <div style="width:33%; float:left; text-align:left; border:1px solid;">Rechts<br>
	<br>
	<br>
	<br>
	<br>
  </div>
</div>
<p id="footer">2013 - unseredomain.de</p>
</body>
</html>


Hoffe wirklich dringend auf Hilfe! ;(

// Edit: Obwohl ich bemerke grade, hier herrscht keine Aktivität mehr. Naja, lasse den Beitrag dennoch mal da.
»koelleman« hat folgendes Bild angehängt:
  • screen1.jpg

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »koelleman« (29. November 2013, 11:27)


TNS

alter Sack, aber Chef :D

Beiträge: 4 695

Vorname: Andreas

  • Private Nachricht senden

6

Montag, 2. Dezember 2013, 16:47

ja hier is leider nicht mehr viel los ... aber ich versuche es mal ;)

3 x 33% ergibt nur 99% Gesamtbreite ... versuche es einfach mal | 33% | 34% | 33% |
Signatur von »TNS«

Zurzeit ist neben dir 1 Benutzer in diesem Thema unterwegs:

1 Besucher