| Autor |
Nachricht |
-
ftc-design
|
 29.07.2011 um 15:39 (UTC)
Titel: Container führt über Header |
|
|
Hallo,
ich habe folgendes Problem:
auf meiner HP kann man erkennen, dass der Container / das Container Hintergrundbild über den Header führt und dadurch auch der schatten des Headers etwas abgehackt aussieht.
Kann man nicht einstellen, dass dieses Hintergrundbild unter der Navi beginnt und sich übers Textfeld lang wiederholt?`
Hier mein Code:
Zitat: table{margin: auto;}
body {
background-image: url();
background-color: #E8E8E8;
background-position: center top;
background-repeat: no-repeat;}
#header {
margin: auto;
height: 248px;
width: 985px;
background-image: url(http://img.webme.com/pic/f/ftc-design/header456.png);
}
#container {
width: 985px;
margin: auto;
overflow: hidden;
margin-top: 30px;
background: url(http://img.webme.com/pic/f/ftc-design/content.png);
background-color: #F0F0F0;
border-top: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
}
#content {
float: left;
width: 905px;
padding: 40px;
font-size: 14px;
color: #000;
background-image: url();
font-family: Arial;
background-repeat: x-repeat;
border-right: 0px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}
#newstext {
position: absolute;
left: 50%;
width: 1000px;
margin-top: -50px;
margin-left: -480px;
overflow: hidden;}
#Links {
position: absolute;
left: 50%;
margin-top: 175px;
margin-left: -460px;
overflow: hidden;}
#nav_container {
margin:0px;
}
#nav_heading {
display:none;
}
#nav {
list-style:none;
margin:0px;
padding:0;
height:38px;
border:0px solid #fff;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.nav_element {
list-style:none;
float:left;
}
.menu {
color:#FFFFFF;
font-size:13px;
text-decoration:none;
display:block;
padding:10px 8px 9px 8px;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.menu:hover {
height: 36px;
color:#FFFFFF;
background: url(http://img.webme.com/pic/f/ftc-design/normnavihover.png) repeat-x;
}
#footer {
height:150px;
width: 954px;
background-color: #fff;
margin-top:20px;
margin: auto;
padding:3px;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;}
h1#header span{display:none;}
li#nav_Eventbersicht {
display: none;
}
li#nav_Impressum {
display: none;
}
li#nav_Newsletter {
display: none;
}
li#nav_Nutzungsbedingungen {
display: none;
}
|
|
|
↑
|
|
 |
-
spisy
|
29.07.2011 um 19:35 (UTC)
Titel: |
|
|
pack mal dein hintergrundbild statt in den #container in den #content
dann must du noch den Abstand nach oben anpassen und gut ist ______________  |
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 19:53 (UTC)
Titel: |
|
|
Dann widerrum ist das Bild überhaupt nicht zu sehen. Es bleibt nur der normale weiße Content |
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 19:59 (UTC)
Titel: |
|
|
Stimmt! aus dem Container hast du es rausgenommen, im Content ist nix drin..
sollte so aussehen:
Zitat:
table{margin: auto;}
body {
background-image: url();
background-color: #E8E8E8;
background-position: center top;
background-repeat: no-repeat;}
#header {
margin: auto;
height: 248px;
width: 985px;
background-image: url(http://img.webme.com/pic/f/ftc-design/header456.png);
}
#container {
width: 985px;
margin: auto;
overflow: hidden;
margin-top: 30px;
background: url();
background-color: #F0F0F0;
border-top: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
}
#content {
float: left;
width: 905px;
padding: 40px;
font-size: 14px;
color: #000;
background-image: url(http://img.webme.com/pic/f/ftc-design/content.png);
font-family: Arial;
background-repeat: x-repeat;
border-right: 0px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}
#newstext {
position: absolute;
left: 50%;
width: 1000px;
margin-top: -50px;
margin-left: -480px;
overflow: hidden;}
#Links {
position: absolute;
left: 50%;
margin-top: 175px;
margin-left: -460px;
overflow: hidden;}
#nav_container {
margin:0px;
}
#nav_heading {
display:none;
}
#nav {
list-style:none;
margin:0px;
padding:0;
height:38px;
border:0px solid #fff;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.nav_element {
list-style:none;
float:left;
}
.menu {
color:#FFFFFF;
font-size:13px;
text-decoration:none;
display:block;
padding:10px 8px 9px 8px;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.menu:hover {
height: 36px;
color:#FFFFFF;
background: url(http://img.webme.com/pic/f/ftc-design/normnavihover.png) repeat-x;
}
#footer {
height:150px;
width: 954px;
background-color: #fff;
margin-top:20px;
margin: auto;
padding:3px;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;}
h1#header span{display:none;}
li#nav_Eventbersicht {
display: none;
}
li#nav_Impressum {
display: none;
}
li#nav_Newsletter {
display: none;
}
li#nav_Nutzungsbedingungen {
display: none;
}
______________
Zuletzt bearbeitet von spisy am 29.07.2011, 21:01, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 20:27 (UTC)
Titel: |
|
|
spisy hat Folgendes geschrieben: Stimmt! aus dem Container hast du es rausgenommen, im Content ist nix drin..
sollte so aussehen:
Zitat:
table{margin: auto;}
body {
background-image: url();
background-color: #E8E8E8;
background-position: center top;
background-repeat: no-repeat;}
#header {
margin: auto;
height: 248px;
width: 985px;
background-image: url(http://img.webme.com/pic/f/ftc-design/header456.png);
}
#container {
width: 985px;
margin: auto;
overflow: hidden;
margin-top: 30px;
background: url();
background-color: #F0F0F0;
border-top: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
}
#content {
float: left;
width: 905px;
padding: 40px;
font-size: 14px;
color: #000;
background-image: url(http://img.webme.com/pic/f/ftc-design/content.png);
font-family: Arial;
background-repeat: x-repeat;
border-right: 0px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}
#newstext {
position: absolute;
left: 50%;
width: 1000px;
margin-top: -50px;
margin-left: -480px;
overflow: hidden;}
#Links {
position: absolute;
left: 50%;
margin-top: 175px;
margin-left: -460px;
overflow: hidden;}
#nav_container {
margin:0px;
}
#nav_heading {
display:none;
}
#nav {
list-style:none;
margin:0px;
padding:0;
height:38px;
border:0px solid #fff;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.nav_element {
list-style:none;
float:left;
}
.menu {
color:#FFFFFF;
font-size:13px;
text-decoration:none;
display:block;
padding:10px 8px 9px 8px;
background:url(http://img.webme.com/pic/f/ftc-design/normnavi.png) repeat-x;
}
.menu:hover {
height: 36px;
color:#FFFFFF;
background: url(http://img.webme.com/pic/f/ftc-design/normnavihover.png) repeat-x;
}
#footer {
height:150px;
width: 954px;
background-color: #fff;
margin-top:20px;
margin: auto;
padding:3px;
border-left: 2px solid #000;
border-right: 2px solid #000;
border-bottom: 2px solid #000;}
h1#header span{display:none;}
li#nav_Eventbersicht {
display: none;
}
li#nav_Impressum {
display: none;
}
li#nav_Newsletter {
display: none;
}
li#nav_Nutzungsbedingungen {
display: none;
}
Da war mein Fehler.
Nur, jetzt hat es keinen Unterschied zu vorher.
Wenn ich dann versuche die höhe zu verändern rutscht der gesamte Header die Navi usw. mit.
Zuletzt bearbeitet von ftc-design am 29.07.2011, 21:32, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 21:08 (UTC)
Titel: |
|
|
Wenn ich mir jetzt den code deiner seite anschaue sind wir wieder am Anfang.
nimm doch mal den Code den ich korrigiert habe und baue den ein.. Danach können wir "schieben"
edit: beim letzten Besuch hier habe ich mir etliche Trojaner eingefangen... ______________
Zuletzt bearbeitet von spisy am 29.07.2011, 22:09, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 21:09 (UTC)
Titel: |
|
|
Er ist bereits drin.
Ich weiß nicht genau wovon du redest  |
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 21:15 (UTC)
Titel: |
|
|
Das sagt mein Webdeveloper:
Zitat:
table{margin: auto;}
body {
background-image: url();
background-color: #E8E8E8;
background-position: center top;
background-repeat: no-repeat;}
#header {
margin: auto;
height: 248px;
width: 985px;
background-image: url(http://img.webme.com/pic/f/ftc-design/header456.png);
}
#container {
width: 985px;
margin: auto;
overflow: hidden;
margin-top: 30px;
background-image: url(http://img.webme.com/pic/f/ftc-design/content.png);
background-color: #F0F0F0;
border-top: 1px solid #;
border-left: 1px solid #;
border-right: 1px solid #;
}
#content {
float: left;
width: 905px;
padding: 40px;
font-size: 14px;
color: #000;
background-image: url(hier steht nix);
font-family: Arial;
background-repeat: x-repeat;
border-right: 0px solid #c9c9c9;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}
.................................usw.............
es mag sein das mein System gerade etwas korumpiert ist... aber so stehts lt. firefox im Quelltext ______________ |
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 21:29 (UTC)
Titel: |
|
|
Also der Code war definitiv richtig. Ich habe ihn noch mal hin und her getauscht und dann ging es.
Ich hätte dabei nur noch eine letzte Frage: könnte man auch Bilder als Umrandung benutzen? (z.B.: border-top: 1px solid #fff; | statt der Farbe einfach ein Bild einsetzen.)
Mir geht es dabei um den Schatten den ich auch im Moment um alles habe.
Dadurch dass der Schatten zu den ganzen Bildern gehört ist er an manchen stellen ziehmlich abgehackt.
Unter anderen habe ich aber auch schon von einem Code gehört, der solch einen Schatten generiert. Was ich aber weniger glaube. |
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 21:39 (UTC)
Titel: |
|
|
siehste.. geht doch 
zu deiner Frage: ne ne neeeee; geht nich
border ist Rahmen und Rahmen werden ohne Schatten dargestellt
Der Code wegen dem Schatten... hmm hatte schon mal jemand hier. Unter FF gehts; mit dem IE gehts wieder nicht.
für den besseren Übergang:
1) im Body > background-color auf #F0F0F0 setzen.. sieht besser aus.
2) Bilder neu bearbeiten und die Schatten länger machen. ______________
Zuletzt bearbeitet von spisy am 29.07.2011, 22:53, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 21:46 (UTC)
Titel: |
|
|
Das Problem ist wenn ich die Schatten verlängere muss ich den Container auch verlängern. Dann wiederrum verlängert sich der Content und auch die Navigation..
Wenn das dann so weiter geht müssen Leute, die einen Monitor mit nicht all zu hoher Auflösung haben zur Seite Scrollen um sich die komplette HP anzusehen. |
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 21:59 (UTC)
Titel: |
|
|
Mist, falsch ausgedrückt 
du hast z.b. dein Headerbild.. dort hast du einen Rahmen drum der einen Farbverlauf enthält... sehe ich das richtig?
Wenn ja: den Rahmen um 5 px nach außen vergrößern und den Farbverlauf etwas nach innen verschieben. Damit bekommst du ein größeres "Feld" im Farbton #f0f0f0
Somit wirkt der Übergang von Dunkel auf hell nicht "abgehackt". Und deine Hp bleibt so wie sie ist ______________ |
|
|
↑
|
|
|
-
ftc-design
|
29.07.2011 um 22:01 (UTC)
Titel: |
|
|
Jetzt habe ich es auch verstanden  danke dir! |
|
|
↑
|
|
|
-
spisy
|
29.07.2011 um 22:04 (UTC)
Titel: |
|
|
gern geschehen, hoffe ich konnte helfen ______________ |
|
|
↑
|
|
|
|
danke dir!