Zaloguj | Zarejestruj | FAQ
Anonymous

css no durchblick!

+ Odpowiedz

Posty: 4 Strona 1 z 1


css no durchblick!

przez christd » Śr maja 16, 2012 5:04 pm

hello leute,

ich blick irgendwie absolut ned durch!

bin grad dabei das template für ne webseit zu schreiben und stosse im moment an meine css-grenzen weil ich irgendwie keinen durchblick mehr hab obwohls eh wahrscheinlich nur eine klitze kleinigkeit ist was ich da ned beachte ... suche im netz hat mir bisher auch nur ein bisserl weitergeholfen, aber jetzt steh ich total an!

ich hoffe ihr könnt mir helfen!

also um es kurz zu beschreiben:
die gesamte seite soll sich immer der bildschirmgrösse anpassen
die menüleiste soll immer ganz oben bleiben und die einzelnen menüs rechtsbündig
die footerleiste immer am bildschirmrand kleben und alles linksbündig
unterhalb der menüleiste links das logo
und immer zentriert in der mitte der seite dann ein feld wo der jeweilige text drinnen steht!

kann ja ned so schwierig sein, a bisserl ahnung hab ich ja wohl von css aber im moemnt hab i echt keinen durchblick mehr!

ich hab bis jetzt folgendes:


=========================================================================================================================

<!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>

<style type="text/css">

html {height:100%; margin-bottom:0px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {
height:100%;
margin:0 auto;
text-align:left;
min-width:600px;
max-width:1000px;
background-color:#CCC;
}

#topmenu{
background-color:#F30;
height:42px;
}


#header {
background:#0F0;
height:100px;
width:100px;
}
#main {
background:#3F9;
}
#footer {
position:absolute;
bottom: 0px;
float:left;
width:100%;
height: 42px;
margin: 0 auto;
background-color:#F30;
}

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}



</style>

</head>

<body class="<?php echo $pageclass; ?>">

<div id="overall">

<div id="topmenu">TopMenu</div>

<div id="view">
<div id="header">Header</div>
<div id="main">Main</div>
</div>

<div id="footer">Footer</div>

</div>

<jdoc:include type="modules" name="debug" />
</body>

</html>


=========================================================================================================================

wie ihr seht ist der footer nicht ganz am bottom und auch ein vertikaler scrollbar taucht dadurch auf!
und die breite des footers stimmt ja auch ned ... sollte sich ja anpassen an die gesamtbreite die ich oben definiere!
aaaargh ... mach da jetzt schon 2 tage rum aber komm zu keiner lösung ...

vielen dank schon mal im voraus!
chris

Załączniki

  1. footer-problem.jpg (31.16 KiB) Pobrane 1324 razy
    footer-problem

  2. ist-status.jpg (50.08 KiB) Pobrane 1273 razy
    ist-status

  3. entwurf.png (27.48 KiB) Pobrane 1274 razy
    seitenentwurf

Avatar użytkownika

christd

  • Posty: 2
  • Dołączył(a): Śr maja 16, 2012 4:34 pm

Re: css no durchblick!

przez XainPro » Cz maja 17, 2012 5:21 am

ist dies das richtige gefunden?

<!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>

<style type="text/css">

html {height:100%; margin-bottom:0px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {
height:100%;
margin:0 auto;
text-align:left;
min-width:600px;
max-width:1000px;
background-color:#CCC;
}

#topmenu{
background-color:#F30;
height:42px;
}


#header {
background:#0F0;
height:100px;
width:100px;
}
#main {
background:#3F9;
}
#footer {
position:absolute;
bottom: 0px;
float:left;
width:1000px;
height: 42px;
margin: 0 auto;
background-color:#F30;
}

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}



</style>

</head>

<body class="<?php echo $pageclass; ?>">

<div id="overall">

<div id="topmenu">TopMenu</div>

<div id="view">
<div id="header">Header</div>
<div id="main">Main</div>
</div>

<div id="footer">Footer</div>

</div>

<jdoc:include type="modules" name="debug" />
</body>

</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: css no durchblick!

przez christd » Pn maja 21, 2012 2:11 pm

is ned ganz das richtige ... aber ich habs nun - so is es richtig ;)

================================================================================


<!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>

<style type="text/css">
/* TEMPLATE CSS
*********************************************/
* { padding: 0;margin: 0; }
html {height:100%; margin-bottom:0px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% "Doppio One",sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {
margin:0 auto;
text-align:left;
min-width:600px;
max-width:1000px;
}

#topmenu{
background-image:url(../images/dasMedienwerk_topmenu_bg.jpg);
height:60px;
margin:0;
font-family: "Doppio One", sans-serif;
font-size:18px;
background-color:#F60;
}

#view {
margin:0 auto;
position:absolute;
top:50%;
left:50%;
margin-left:-450px;
margin-top:-200px;
width: 900px;
height: 400px;
border: 1px solid #333;
}

#header {
position:absolute;
margin:0 auto;
height:150px;
width:300px;
background-image:url(../images/dasMedienwerk_logo.png);
}

#main {
float:right;
width: 600px;
height: 400px;
border: 1px solid #333;
background-color:rgba(255,255,255,.6);
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
background-color:#0F0;
}

#footer {
position:absolute;
bottom: 0px;
left: 0;
width:100%;
height: 60px;
margin: 0 auto;
background-color:#F60;
background-image:url(../images/dasMedienwerk_bottommenu_bg.jpg);
}


#intopmenu {
font-family: "Doppio One", sans-serif;
font-size:18px;
text-align:right;
}

#intopmenu li {
float:right;
padding: 12px;
list-style:none;
}


#inmain {
position:absolute;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
text-align:justify;
}

#inmain h1 {
font-size: 20px;
}

#inmain h2 {
font-size: 20px;
}


#infooter {
font-family: "Doppio One", sans-serif;
font-size:18px;
text-align:left;
}

#infooter li {
float:left;
margin-top: 28px;
padding-left: 24px;
list-style:none;
}
a {
font-weight:normal;
text-decoration:none;
color:#000;
}

a:hover {
font-weight:bold;
text-decoration:none;
color:#000;
text-shadow: 2px 2px 2px #999;
}

a:active {
font-weight:bold;
text-decoration:none;
color:#6656;
text-shadow: 2px 2px 2px #999;
}

a:focus {
font-weight:bold;
text-decoration:none;
color:#666;
text-shadow: 2px 2px 2px #999;
}


/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}


</style>

</head>

<body class="<?php echo $pageclass; ?>">
<div id="topmenu">TopMenu</div>

<div id="overall">

<div id="view">
<div id="header">Header</div>
<div id="main">Main</div>
</div>


</div>

<div id="footer">Footer</div>
</body>

</html>


================================================================================

vielen dank
Avatar użytkownika

christd

  • Posty: 2
  • Dołączył(a): Śr maja 16, 2012 4:34 pm

Re: css no durchblick!

przez XainPro » Śr maja 30, 2012 4:47 am

ja es ist :)
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1