tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
355
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 29.07.07 00:51 #1
    Identität Identität ist offline Mitglied Gold
    Registriert seit
    Feb 2006
    Beiträge
    171
    Ich habe ein Bild, weil ich das nicht beschreiben kann. Die Boxen sollen aufjedenfall mit nach unten wandern. Ob das überhaupt möglich ist?

    Hier das Bild: http://saved.im/nja0owrvymy/bild.jpg

    index
    Code :
    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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Titel</title>
 
</head>
<body>
<div id="full" class="clearfix">
        <div id="header"><img src="files/header.gif" alt="Header" width="800" height="132" /></div>
        <div id="left"><img src="files/navicell.gif" alt="mehr als nur bauen" width="35" height="468" align="bottom" /></div>
        <div id="navi">
            <ul class="navi">
                          <li><p class="navigation_headline">Navi</ul>
        </div>
  <div id="content">
            <div class="content">
                     INHALT
            </div>
  </div>
</div>
<div class="copyright">&copy; 2007</div>
</body>
</html>


    style.css
    Code :
    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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

    #full{
    background-color:#fff;
    width:800px;
    height:auto;
    border:1px solid #e0dfdf;
    padding:0;
    margin:0 auto;
    text-align:left;
}
 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
 
 
#header{
    width:800px;
}
 
#left{
    background-image:url(files/navicellbg.gif);
    width:35px;
    float:left;
    height: 300px;
}
 
#navi{
    width:129px;
    float:left;
    background-color:#faf7f7;
    border-left:1px solid #e0dfdf;
    height:480px;
}
 
#content{
    float:left;
    width:624px;
    padding:5px;
    background-color:#fff;
    border-left:1px solid #e0dfdf;
    border-top:1px solid #e0dfdf;
 
}
 
A.navi:link,A.navi:visited,A.navi:hover
{
display:block;
line-height: 16px;
font-size:12px;
font-family:arial, Helvetica, sans-serif;
width: 129px;
text-decoration:none;
text-align:left;
border-top:#FAF7F7 1px solid;
border-bottom:#FAF7F7 1px solid;
}
 
A.navi:link,A.navi:visited
{
color:#000;
}
 
A.navi:hover
{
color:#fff;
background-color:#ff0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
text-align:right;
}
ul.navi {
margin:0;
padding:0;
list-style-type:none;
}
 
.content {
empty-cells:show;
vertical-align:top;
font-size:13px;
font-family:arial, Helvetica, sans-serif;
text-align:left;
}
.content:link {
empty-cells:show;
vertical-align:top;
font-size:13px;
font-family:arial, Helvetica, sans-serif;
text-align:left;
text-decoration:underline;
color:#000;
}
.content:hover {
text-decoration:none;
}
.topic {
padding-left:4px;
background: #ff0000;
height:17px;
font-size:12px;
text-align:left;
color:#fff;
font-weight:bold;
font-family:arial, Helvetica, sans-serif;
}
 
.copyright {
padding-top:3px;
empty-cells:show;
vertical-align:top;
font-size:12px;
font-family:arial, Helvetica, sans-serif;
text-align:center;
}
 
.contab{
background-color:#faf7f7;
padding:6px;
}
 
.hauskata{
margin-top:5px;
margin-bottom:10px;
padding-left:3px;
background-color:#be0000;
color:#efefef;
font-weight:bold;
font-size:12px;
}
 
.navigation_headline{
margin:0 0 5px 0;
font-size:12px;
height: 15px;
font-family:arial, Helvetica, sans-serif;
width: 129px;
text-align:left;
border-top:#ccc 1px solid;
border-bottom:#ccc 1px solid;
background-color:#efefef;
text-align:center;
}

    Vielen Dank für eure Hilfe!
     
  2. 29.07.07 01:09 #2
    Maik Tutorials.de Gastzugang
    Hi,

    vielleicht helfen dir hier die Faux-Columns weiter?
     
  3. 29.07.07 11:19 #3
    Identität Identität ist offline Mitglied Gold
    Registriert seit
    Feb 2006
    Beiträge
    171
    Hey Maik,
    geht das nicht einfacher? Die reden dort ja von einem Hintergrundbild. Finde ich jetzt nicht die beste Lösung. Kennt ihr vielleicht noch einen anderen Weg?
     
  4. 29.07.07 11:23 #4
    Maik Tutorials.de Gastzugang
    Einfacher als mit einem Hintergrundbild geht es eigentlich nicht, um die Spaltenhöhen "augenscheinlich" anzugleichen.

    Alternativ hierzu kannst du dir ja http://www.cssplay.co.uk/layouts/3cols.html anschauen.
     
  5. 29.07.07 11:38 #5
    Identität Identität ist offline Mitglied Gold
    Registriert seit
    Feb 2006
    Beiträge
    171
    Okay danke dir. Ich werde mir beide Sachen anschauen und dann eine davon auswählen.
     
« Div min-height:100% will nicht | Problem mit Firefox und IE »

Ähnliche Themen

  1. Kugeln sollen sich NICHT abstoßen!
    Von Gooz im Forum Cinema 4D
    Antworten: 2
    Letzter Beitrag: 29.07.10, 12:10
  2. Partikel sollen sich untereinanders abstoßen
    Von jacklhyde im Forum Cinema 4D
    Antworten: 3
    Letzter Beitrag: 15.03.07, 17:55
  3. Schleife - Namen sollen sich mit erhöhen!
    Von Breuker im Forum PHP
    Antworten: 3
    Letzter Beitrag: 13.10.06, 07:33
  4. Walzen sollen sich bewegen (optisch)
    Von wolli1 im Forum Photoshop
    Antworten: 10
    Letzter Beitrag: 18.06.05, 14:56
  5. Tabellen Problem (verschieben sich, wo sie nicht sollen)
    Von Strahleman im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 27.11.03, 12:08