Anmelden | Registrieren | FAQ
Anonymous

css no durchblick!

+ Antwort erstellen

4 Beiträge Seite 1 von 1


css no durchblick!

von christd » Mi Mai 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

Dateianhänge

  1. footer-problem.jpg (31.16 KiB) 1269-mal heruntergeladen
    footer-problem

  2. ist-status.jpg (50.08 KiB) 1216-mal heruntergeladen
    ist-status

  3. entwurf.png (27.48 KiB) 1217-mal heruntergeladen
    seitenentwurf

Benutzeravatar

christd

  • Beiträge: 2
  • Registriert: Mi Mai 16, 2012 4:34 pm

Re: css no durchblick!

von XainPro » Do Mai 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>
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm

Re: css no durchblick!

von christd » Mo Mai 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
Benutzeravatar

christd

  • Beiträge: 2
  • Registriert: Mi Mai 16, 2012 4:34 pm

Re: css no durchblick!

von XainPro » Mi Mai 30, 2012 4:47 am

ja es ist :)
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm


+ Antwort erstellen

Seite 1 von 1