 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
braimer
Threadersteller
Dabei seit: 01.12.2009
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 04.02.2010 16:49
Titel Diverse Probleme mit DIVs... |
  |
|
... ich bin zu Blöd für Digital...
Moin...
Ich versuche schon seit längerem die beiden Divs im Head kleiner zu machen und jeweils links und rechts bündig an den rand zu setzen...
Zum anderen nimmt meine Content div keine feste größe an, ohne, dass mein fooder flöten geht, wo das impressum drin steht, dass eigentlich einen hover bekommen soll, wenn ich den aber anwende steht der text wieder links, und das soll er auch nicht...
und zudem tanzt mein menü beim mouseover, das bekomme ich auch nicht weg...
in der forensuche bin ich nicht wirklich fündig geworden, zumindest hab ich das nie verstanden...
wäre cool, wenn mir wer verraten könnte wie ich das bewekstellige, bzw. das script aufräumt.
mfg
| braimer hat geschrieben: |
<!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>home</title>
<meta content="Bildbearbeitung, Layout, Drucksachen, Visitenkarten, Businesscard, Flyer, Freelancer" />
<style type="text/css">
body { text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; }
#site { width:800px; max-height:100%; background-color:#FFFFFF; text-align:left; margin:0px auto;}
#kopf { width:760px; height:240px; background-color:#FFFFFF; text-align:left; padding-left:20px; padding-right:20px;;}
#navi { width:105px; min-height:200px; background-color:#FFFFFF; padding-top:40px; border-right:dotted #A7C500; border-left:dotted #a7c500}
#content { width:660px; min-height:380px; background-color:FFFFFF; float:right; padding-top:40px; padding-right:20px; border-right: dotted #a7c500}
#food { width:800px; height:40px; background-color:#FFFFFF; text-align:right; font-size:10px }
a:link, a:visited { display:compact ; color:#2D401A; text-decoration:none; padding-left:20px;}
a:hover, a:active { display:block; color:#A7C500; text-decoration:none; padding-left:20px; border-bottom:dotted #2d401a }
#qr { text-align:left; float:left; width:120px; padding-top:60px;}
#logo {float:right; width:600px; }
.Stil1 {color: #2d401a;}
.Stil2 {color: #2d401a; float:right;}
</style>
</head>
<body>
<div id="site">
<div id="kopf"><div id="qr"><img src="../Stuff/qr-dopamin-graphics.png" width="120" height="120" /></div><div id="logo"><img src="../Stuff/banner.png" alt="" width="600" height="240" align="right" /></div></div>
<div class="Stil1" id="content">
Essit am, vent volor autpate vel ea alit vendreetuer si.
Lortio odolobore dunt nostiscip exerat lobore delenibh eugait wisl dunt veleseniamet nis dunt venis eros am inisse feugait lamcon er si.
Sequate molorer ostrud eugue molobor eraessit nullan ex ea facillaore core ea feugiam nim vendre dolore ver alit lor sumsan elesequis at velis adigna faciliquisci enit lamconsectem auguer amet, consequat lobor ing et nullum dunt aci tem volumsandre facilit ilisi ex ero con henim zzriure etuerit vel ut ipsum quat am adipit num nullan heniam irit lum ent alisciduisi tat il eliquisi enisl ut</div>
<div id="navi">
<a href="#">Home</a>
<a href="#">Vita</a>
<a href="#">Galerie</a>
<a href="#">Kontakt</a>
</div>
<div class="Stil2" id="food">Impressum</div>
</div>
</body>
</html>
|
[edit by Nimroy]
Titel geändert. Bitte aussagekräftige Titel verwenden
Zuletzt bearbeitet von Nimroy am Mo 08.02.2010 14:31, insgesamt 3-mal bearbeitet
|
|
| |
  |
 |
SimonDerDude
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Fr 05.02.2010 12:48
Titel
|
|
|
Wenn du links & rechts ein Padding schreibst wird nie etwas bündig ausser du setzt es auf 0px.
Wer floatet muss danach auch clearen.
<div id="clear" style="clear:both;"></div>
Aber zuerst gewöhnst du dir an ordentlich css zu schreiben 
#blabla {
(einmal TAB)width: 20px;
(einmal TAB)height: 20px;
}
mit /* KOMMENTIERST DU AUS */ und kannst dir helfen Ordnung zu bewahren. Schreibst z.B. /* Navigation */ und schreibst darunter alle ID's die zur Navigation gehören.
Am besten machst du dir eine externe CSS Datei und bindest sie ein.
Für mehr hab ich gerade keine Zeit:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="Bildbearbeitung, Layout, Drucksachen, Visitenkarten, Businesscard, Flyer, Freelancer">
<style type="text/css">
body {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
#site {
width:800px;
max-height:100%;
background-color:#FFFFFF;
margin:0px auto;
}
/* H E A D E R */
#kopf {
width:800px;
height:240px;
background-color: green;
}
#qr {
float:left;
width:120px;
padding-top:60px;
margin-left: 0px;
background-color: red;
margin-top:60px;
}
#logo {
float:left;
width:600px;
height:240px;
margin-left:80px;
background-color: blue;
}
/* N A V I G A T I O N */
#navi {
width:105px;
min-height:350px;
background-color:#FFFFFF;
padding-top:40px;
border-right:dotted #A7C500;
border-left:dotted #a7c500;
float: left;
text-align:left;
}
a:link, a:visited {
display:compact ;
color:#2D401A;
text-decoration:none;
padding-left:20px;
}
a:hover, a:active {
display:block;
color:#A7C500;
text-decoration:none;
padding-left:20px;
border-bottom:dotted #2d401a;
}
/* C O N T E N T */
#content {
width:690px;
min-height:350px;
background-color:FFFFFF;
border-right: dotted #a7c500;
text-align: left;
margin-left: 110px;
position:relative;
padding-top:40px;
}
#text {
margin-top: 0px;
margin-left: 10px;
position:relative;
}
.Stil1 {
color: #2d401a;
font-size:11px;
font-family:Verdana;
}
.Stil2 {
color: #2d401a;
float:left;
}
/* F O O T E R */
#foot {
width:800px;
height:40px;
background-color:#FFFFFF;
text-align:right;
font-size:10px;
padding-top: 25px;
padding-right:0px;
}
.clear{
clear: left;
}
</style>
</head>
<body>
<div id="site">
<div id="kopf">
<div id="qr"></div>
<div id="logo"></div>
</div>
<div class="clear"></div>
<div id="navi">
<a href="#">Home</a>
<a href="#">Vita</a>
<a href="#">Galerie</a>
<a href="#">Kontakt</a>
</div>
<div id="content">
<div class="Stil1 "id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="clear"></div>
</div>
<div class="Stil2" id="foot">
<a href="#">Impressum</a>
</div>
</body>
</html> |
Zuletzt bearbeitet von SimonDerDude am Fr 05.02.2010 12:53, insgesamt 3-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 05.02.2010 19:16
Titel
|
|
|
| Azazael hat geschrieben: | Wer floatet muss danach auch clearen.
<div id="clear" style="clear:both;"></div> |
Dafür braucht er aber kein leeres Element. Davon hast Du ihm gleich 2 eingebaut - beide überflüssig. Außerdem wird eh noch nicht korrekt gecleart, da der Footer floatet und so aus #site heraushängt. float des Footers sollte also raus.
Der Content sollte weiterhin floaten, damit man innerhalb beliebig clearen kann, ohne dass das clear-Element unter die Navi rutscht. Der Footer bekommt dann clear: both; (aber floatet nicht mehr).
Das Menü "tanzt" beim Hovern immer noch, da die border aus dem Nichts erscheint - Abhilfe: padding-bottom, das beim Hovern um den Wert von border-width (sollte explizit per px-Wert deklariert werden!) verringert wird. Abgesehen davon gehört ein Menü in eine Liste.
Und die min-height-Deklarationen von Navi & Content sind letztlich für die Katz, denn "mitwachsen" wird da nix (und das scheint mir die Absicht dahinter zu sein), für (scheinbar) gleich hohe Spalten müssen andere Methoden her.
Der Sinn von max-height: 100%; erschließt sich mir auch nicht - erstens ist dies eh wirkungslos, solange die Bezugswerte in Form von height: 100%; für html & body fehlen, und zweitens wird bei einem Viewport mit geringer Höhe der ganze Inhalt überlaufen.
Und als erstes immer: http://www.mediengestalter.info/forum/4/hp-hat-abstand-zum-browserrand-136853-1.html
Zuletzt bearbeitet von heiko_rs am Fr 05.02.2010 19:17, insgesamt 1-mal bearbeitet
|
|
| |
|
|
braimer
Threadersteller
Dabei seit: 01.12.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 08.02.2010 13:47
Titel
|
|
|
So, erstmal vielen Dank an euch beide...
Hab die tage endlich wieder Zeit mich weiter an der HP zu versuchen... Nun muss ich erstmal n paar dinge nachschlagen 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
diverse Probleme mit Flash-Clip
Probleme mit DIVs im IE und FF
Diverse Links in Google löschen ?
Wie öffne ich diverse Fenster automatisch in Flash?
Verkaufe diverse Fachbücher zum Schnäppchen-Preis!
Word 2007 diverse fragen bzgl. Template
|
|
|
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.
|
|
