 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Kazanian
Threadersteller
Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 09.10.2007 21:28
Titel
|
  |
|
Angenommen man möchte die Breite ändern, so muss man immer sehr umständlich die Schattengrafik anpassen. Und unter flexibel versteh ich insofern das man den Wert der Breite angibt und sich alles so anpasst wie es sein soll. Quasi das was Tabellen so schön bieten, von denen ich aber mittlerweile weg bin. Ich seh das mit html und body Grafik aber aufjedenfall sehr dankbar als Notlösung an falls sich kein anderer, schöner Weg findet. Hab schon ne Menge ausprobiert was man z.b. aus fixed Footer Beispielen etc ziehen kann, aber hat irgendwie nichts gebracht. Fraglich ist für mich wieso man ein Div per Umweg wirklich auf die ganze Höhe strecken kann, aber nicht Divs die in diesem liegen. 
|
|
| |
  |
 |
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 09.10.2007 21:42
Titel
|
|
|
Das mit dem nicht-flexibel ist schon richtig
irgendwo, aber im Endeffekt wärs ja nur
ein Bild und ein paar Angaben im css. So
oft ändert man ja auch nicht das Layout -
also in der Regel - sach ich mal.
Konstruieren könntest Dus so z.B.
Klick
//
| Kazanian hat geschrieben: | | Fraglich ist für mich wieso man ein Div per Umweg wirklich auf die ganze Höhe strecken kann, aber nicht Divs die in diesem liegen. |
Jo, ist auch ein Manko in meinen Augen.
Oder sagen wir mal so, der IE 6 pinkelt
da in die Suppe. In »modernen« Browsern
kannst überall und jederzeit hergehen und
z.B. ein Div absolut mit top/left/bottom/right
rumpositionieren - siehe DIV#dummy hier.
Zuletzt bearbeitet von Raumwurm am Di 09.10.2007 21:50, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 21:45
Titel
|
|
|
| Kazanian hat geschrieben: | | Angenommen man möchte die Breite ändern, so muss man immer sehr umständlich die Schattengrafik anpassen. Und unter flexibel versteh ich insofern das man den Wert der Breite angibt und sich alles so anpasst wie es sein soll. Quasi das was Tabellen so schön bieten, von denen ich aber mittlerweile weg bin. |
Ok, das stimmt natürlich.
| Kazanian hat geschrieben: | | Fraglich ist für mich wieso man ein Div per Umweg wirklich auf die ganze Höhe strecken kann, aber nicht Divs die in diesem liegen. |
Um was geht´s denn genau, was möchtest du erreichen?
|
|
| |
 |
|
Kazanian
Threadersteller
Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 09.10.2007 22:30
Titel
|
|
|
Das sieht sehr vielversprechend aus, ich hoffe das es morgen noch nicht von deinem Server gelöscht ist Wurm und werde mich dann in Ruhe damit befassen. Vielen Dank. 
|
|
| |
|
|
Kazanian
Threadersteller
Dabei seit: 09.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 10.10.2007 11:31
Titel
|
|
|
Ich habe es geschafft, wär mir ohne die Hilfe von Raumwurm aber wohl nicht möglich gewesen.
| Code: |
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem Ipsum</title>
<style type="text/css">
<!--
html {
height:100%;
background: url(gfx/html-bg.jpg);
background-position: top;
background-repeat: repeat-x;
background-color:#B0D5FF;
}
body {
height:100%;
margin:0;
padding:0;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link, a:visited { color: #1F55BF; text-decoration: none;}
a:hover, a:active { color: #000000; text-decoration: underline;}
img { border:0;}
/* Schatten */
#left {
width: 50px;
background:url(gfx/left.jpg);
background-position: top;
background-repeat: repeat-y;
background-color: #1F55BF;
position:absolute;
left:-50px;
top:0;
min-height: 100%;
margin: 0 auto;
}
#right {
width: 50px;
background:url(gfx/right.jpg);
background-position: top;
background-repeat: repeat-y;
background-color: #1F55BF;
position:absolute;
right:-50px;
top:0;
min-height: 100%;
margin: 0 auto;
}
#topleft {
width: 50px;
height: 390px;
background:url(gfx/topleft.jpg);
background-position: top;
background-repeat: no-repeat;
position:absolute;
left:-50px;
top:0;
}
#topright {
width: 50px;
height: 390px;
background:url(gfx/topright.jpg);
background-position: top;
background-repeat: no-repeat;
position:absolute;
right:-50px;
top:0;
}
/* Hauptcontainer */
#root {
width: 60%;
}
#root {
position:relative;
border: 0px;
padding: 0px;
background-color:#8AB3E3;
/*height: auto !important;*/
min-height:100%;
margin: 0 auto;
z-index: 1;
}
#head {
margin:0;
padding:10px;
padding-bottom:15px;
padding-top: 0px;
height:114px;
background:url(gfx/logo.jpg);
background-position: top right;
background-repeat: no-repeat;
background-color:#E1E7EE;
}
#head h1{
font-size:28px;
padding:0px;
margin:0px;
}
#nav {
height:45px;
margin:0;
padding:0px;
background: url(gfx/nav-normal.jpg);
background-color: #FFFFFF;
}
ul#nav_buttons {
margin: 0; padding: 0;
text-align: left;
}
ul#nav_buttons li {
list-style: none;
float:left;
height:45px;
background: url(gfx/nav-space.jpg);
background-color: #ababab;
}
ul#nav_buttons a, ul#nav_buttons span {
margin-right:1px;
height:30px;
padding-top:15px;
padding-left: 10px;
padding-right: 10px;
display:block;
text-decoration: none; font-weight: bold;
font-size: 12px;
color: #000000;
background: url(gfx/nav-normal.jpg);
background-color: #FFFFFF;
}
ul#nav_buttons a:hover, ul#nav_buttons span {
background: url(gfx/nav-hover.jpg);
background-color: #FEC541;
}
#content {
margin:0;
padding:20px;
margin-top: 0px;
background:url(gfx/content-bg.jpg);
background-position: top;
background-repeat: repeat-x;
background-color:#8AB3E3;
}
#content h1{
font-size:18px;
padding:0px;
margin:0px;
border-bottom: 2px solid #FFFFFF;
}
#content a:link, #content a:visited { color: #1F55BF; text-decoration: none;}
#content a:hover, #content a:active { color: #000000; text-decoration: underline;}
#content img { border:0;}
#content .addbox {
background-image: url(gfx/box-top.jpg);
background-position: top;
background-repeat: repeat-x;
background-color: #F1F4F8;
text-decoration: none;
padding: 5px;
border-width: 3px;
border-style: solid;
border-color: #ffffff;
margin: 0 0 15px 0;
}
/* Footer */
#fakefoot {
height: 50px;
}
#footerbox {
position:absolute;
margin: 0 auto;
bottom: 0px;
height: 50px;
width: 100%;
background-image: url(gfx/box-top.jpg);
background-position: top;
background-repeat: repeat-x;
background-color: #F1F4F8;
text-decoration: none;
}
#footer {
padding: 10px;
text-align: center;
font-weight: bold;
}
-->
</style>
<!--[if lt IE 7]>
<style type="text/css">
#root, #left, #right {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="root">
<div id="head">
<h1>Lorem ipsum dolor sit amet</h1>
consectetuer adipiscing elit
</div>
<!-- / End Head -->
<div id="nav">
<ul id="nav_buttons">
<li><a href="index.html" title="Home">Lorem</a></li>
<li><a href="index.html" title="Home">ipsum</a></li>
<li><a href="index.html" title="Home">dolor</a></li>
<li><a href="index.html" title="Home">sit</a></li>
<li><a href="index.html" title="Home">amet</a></li>
</ul>
</div>
<!-- / End Nav -->
<div id="content">
<div class="addbox">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
<p/>
</div>
<!-- / End Addbox -->
<div class="addbox">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
<p/>
</div>
<!-- / End Addbox -->
<div class="addbox">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat diam, ornare vitae, ullamcorper nec, mattis ut, ante. Nunc vulputate. Ut at lacus. Proin nibh mauris, molestie sed, faucibus vel, accumsan et, nunc. Morbi tortor ipsum, tincidunt nec, varius non, suscipit at, tortor. Maecenas ac libero eu turpis facilisis fermentum. Quisque nisi. Suspendisse ac nisl. Sed congue, turpis in congue dictum, turpis nulla cursus nunc, eget varius lectus quam quis ante. Praesent vitae velit. Integer porttitor, purus ac tincidunt imperdiet, tortor dui ullamcorper turpis, quis ornare velit lacus in nisi. Integer orci quam, feugiat quis, mollis quis, semper non, libero. Cras vulputate, urna quis ornare posuere, velit velit hendrerit magna, at adipiscing ante odio a eros. Nulla porttitor lacus facilisis nisi. Duis commodo vestibulum velit. Fusce sollicitudin ligula nec ligula. Vivamus auctor dictum diam. Suspendisse sodales eros dignissim mi. Nam facilisis dolor eu elit. Ut eget nisi.
<p/>
Sed ac sapien a risus gravida tincidunt. Vestibulum quis orci in ante vulputate aliquet. Donec sagittis posuere enim. Maecenas velit. Praesent vitae felis. Cras dolor mi, hendrerit condimentum, elementum sit amet, sollicitudin nec, risus. Sed ullamcorper aliquet dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis elit. Quisque mollis. Pellentesque urna mi, fringilla eleifend, tincidunt sed, vestibulum id, nunc. Aliquam nunc nibh, rutrum sed, tempor in, rhoncus non, metus. In eu ipsum non nisi tristique lobortis. Etiam condimentum. Nam mi neque, sagittis ut, faucibus et, aliquam lacinia, orci. Aliquam luctus lorem eget nulla. Etiam libero. Aliquam ut mi sit amet neque lacinia adipiscing.
<p/>
</div>
<!-- / End Addbox -->
<div id="fakefoot"></div>
</div>
<!-- / End Content -->
<!-- Schatten -->
<div id="left"></div>
<div id="right"></div>
<div id="topleft"></div>
<div id="topright"></div>
<!-- / End Schatten -->
<div id="footerbox">
<div id="footer">
© 2007 Lorem Ipsum<br/><a href="#">Consectetuer adipiscing elit.</a>
</div>
</div>
<!-- / End Footer -->
</div>
<!-- / End Root -->
</body>
</html>
|
Flexibel und ohne Faux Colums. 
Edit:
Leider funktioniert die Höhe mit den Schatten in Opera und Safari nicht richtig aber in meinem Fall kann ich damit leben. Dürfte an min-height liegen oder? Wenn es da ne simple Lösung gibt wär ich trotzdem dankbar.
Zuletzt bearbeitet von Kazanian am Mi 10.10.2007 12:05, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Erneute Problematik mit der On Release Funktion
javascript : Array sortieren Problematik
[div-problematik] schon wieder - ich dreh noch durch...
vertikale Navigation zum aufklappen
vertikale Bewegung mit AS eingrenzen
Suche nette Vertikale Bildergalerie
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
