| Autor |
Nachricht |
-
feuerwehrcoswig
|
 10.02.2012 um 09:49 (UTC)
Titel: Design Hilfe zum Seiteninhalt |
|
|
hallo liebes forum
kann mir jemand sagen wo ich den abstand zum von oberen seiten inhalt eine stelle den möchte eine "Breadcrumbs-Navigation erstellen" bzw habe es schon
aber finde diese muss ganz hoch im seiteninhalt wäre nett wenn sich jemand meldet
hier der code damit ihr mir helfen könnt bzw. sagen könnt
Zitat: #header_container{display:none;}
h2#title{display:none;}
#counter{display:none;}
/*WERBUNG MITTIG*/
table[height="102"] {
margin:auto;
}
/*HINTERGRUND*/
body{
background-image: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswighintergrund.png);
background-color: #ececec;
background-repeat: repeat;
font-family: arial, sans-serif;
font-size: 12px;
}
/*ÜBERSCHRIFTEN FORMATIEREN*/
h1{
color:#fff;
font-size: 38px;
}
h2{
color: #73808A;
font-size: 30px;
}
/*ÜBERSCHRIFTEN IM HEADER*/
h1[id="Titel"]{
margin-top: 98px;
margin-left: 300px;
float: left;
}
h2[id="Untertitel"]{
margin-top: 150px;
margin-left: -420px;
float: left;
}
/*LINKFORMATIERUNGEN*/
a{
color: #525A7A;
text-decoration: none;
}
a:hover{
color: #000;
}
/*GRUNDGERÜST*/
#Schwubbel{
width: 1000px;
margin: 0px auto;
}
#container{
width: 1000px;
float: left;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontainer.png);
background-repeat: repeat-y;
}
/*HEADER*/
#ÜberInhalt{
width: 1000px;
height: 250px;
float: right;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigheader.png);
margin-top: 40px;
color: #fff;
}
/*NAVIGATION*/
#nav_container{
margin-left: 25px;
border: 1px solid #B0B0B0;
width: 250px;
padding-bottom: 25px;
float: left;
}
#nav_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 25px;
margin-left: 25px;
}
a.menu{
display:block;
border-bottom: 1px solid #B0B0B0;
border-top: 1px solid #B0B0B0;
width: 185px;
height: 26px;
color: #73808A;
text-decoration: none;
margin-bottom: -1px;
padding-left: 10px;
padding-top: 4px;
font-size: 13px;
font-weight: bold;
}
ul#nav{
margin-top: 70px;
margin-left: -40px;
}
li.nav_element{
list-style-type: none;
}
li.nav_element a:hover{
list-style-type: none;
background:
url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswighovereff.png);
color: #ff0000;
}
li.subpage a{
padding-left: 20px;
width: 175px;
font-style: italic;
}
li.subpage a:before{
content: "> ";
}
li.checked_menu a{
color: #000000;
font-weight: bold;
}
/*SIDEBAR*/
#sidebar_container{
margin-left: 25px;
border: 1px solid #B0B0B0;
padding: 25px;
width: 200px;
margin-bottom: 30px;
margin-top: 30px;
float: left;
clear:left;
}
#sidebar_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 15px;
}
#sidebar_content{
color: #73808A;
text-align: justify;
margin-top: 60px;
}
#sidebar_content h2{
color: #fff;
}
#sidebar_content a:hover{
color: #a01213;
text-decoration: underline;
}
/*INHALT*/
#Contenttop{
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontenttop.png);
width: 1000px;
height: 20px;
margin: 0px auto;
float: left;
}
#content{
width: 620px;
border: 1px solid #B0B0B0;
margin-right: 25px;
padding: 25px;
float: right;
color: #000;
}
#UnterInhalt{
width: 1000px;
height: 20px;
float: left;
background-image: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigbottom.png);
margin-bottom: 50px;
}
#Platzhalter{
width: 1000px;
height: 3px;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigplatzhalter.png);
float:left;
}
#Linie{
width: 950px;
height: 1px;
float: right;
margin-right: 25px;
background: #B0B0B0;
}
/*FOOTER*/
#Footer{
width: 1000px;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontainer.png);
color: #B0B0B0;
text-align: center;
float: right;
}
#Footer a{
color: #000;
} |
|
|
↑
|
|
 |
|
|
|
|
↑
|
|
|
-
feuerwehrcoswig
|
10.02.2012 um 23:41 (UTC)
Titel: Re: Design Hilfe zum Seiteninhalt |
|
|
o-4-n hat Folgendes geschrieben: Hallo,
Nochmal bitte auf deutsch.
Am besten machst du auch einen Screenshot.
Bitte hier ist der Link Zum Screenshot
http://img.webme.com/pic/f/feuerwehrcoswig/hpbk.jpg |
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
-
feuerwehrcoswig
|
|
|
↑
|
|
|
-
feuerwehrcoswig
|
13.02.2012 um 16:07 (UTC)
Titel: |
|
|
Zuletzt bearbeitet von feuerwehrcoswig am 13.02.2012, 17:11, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
13.02.2012 um 20:26 (UTC)
Titel: |
|
|
Zu der ursprünglichen Frage:
Du definierst für den content in folgendem Blog ein padding von 25px:
Zitat: #content {
border: 1px solid #B0B0B0;
color: #000000;
float: right;
margin-right: 25px;
width: 620px;
}
Wenn du den Abstand nach oben verkleinern möchtest, musst du einfach das padding-top anpassen.
Für deine neue Frage:
Gib dem content einfach mit der min-height Eigenschaft einfach die gewünschte Höhe. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering |
|
|
↑
|
|
|
-
feuerwehrcoswig
|
14.02.2012 um 13:37 (UTC)
Titel: |
|
|
also so wirklich funftioniert das ni wie du mir sagst wenn ich das reduzier dann schiebt sich auch der linke rand des seiteninhaltes nach rechts bzw falsch ausgesrückt es wird kleiner gibt es da noch ander möglich keit ?
danke für dem andere tipp mit anpassen von den zwischenabstand zum seitenende
kannst du mir die geänderte version bitte posten vielleicht mache ich ja was falsch
das wäre das momentane script
Code: #header_container{display:none;}
h2#title{display:none;}
#counter{display:none;}
/*WERBUNG MITTIG*/
table[height="102"] {
margin:auto;
}
/*HINTERGRUND*/
body{
background-image: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswighintergrund.png);
background-color: #ececec;
background-repeat: repeat;
font-family: arial, sans-serif;
font-size: 12px;
}
/*ÜBERSCHRIFTEN FORMATIEREN*/
h1{
color:#fff;
font-size: 38px;
}
h2{
color: #73808A;
font-size: 30px;
}
/*ÜBERSCHRIFTEN IM HEADER*/
h1[id="Titel"]{
margin-top: 98px;
margin-left: 300px;
float: left;
}
h2[id="Untertitel"]{
margin-top: 150px;
margin-left: -420px;
float: left;
}
/*LINKFORMATIERUNGEN*/
a{
color: #525A7A;
text-decoration: none;
}
a:hover{
color: #000;
}
/*GRUNDGERÜST*/
#Schwubbel{
width: 1000px;
margin: 0px auto;
}
#container{
width: 1000px;
float: left;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontainer.png);
background-repeat: repeat-y;
}
/*HEADER*/
#ÜberInhalt{
width: 1000px;
height: 330px;
float: right;
background: url(http://img.webme.com/pic/t/testcoswig/feuerwehrcoswigheaderhaus.png);
margin-top: 40px;
color: #fff;
}
/*NAVIGATION*/
#nav_container{
margin-left: 25px;
border: 1px solid #B0B0B0;
width: 250px;
padding-bottom: 25px;
float: left;
}
#nav_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 25px;
margin-left: 25px;
}
a.menu{
display:block;
border-bottom: 1px solid #B0B0B0;
border-top: 1px solid #B0B0B0;
width: 185px;
height: 26px;
color: #73808A;
text-decoration: none;
margin-bottom: -1px;
padding-left: 10px;
padding-top: 4px;
font-size: 13px;
font-weight: bold;
}
ul#nav{
margin-top: 40px;
margin-left: -40px;
}
li.nav_element{
list-style-type: none;
}
li.nav_element a:hover{
list-style-type: none;
background:
url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswighovereff.png);
color: #ff0000;
}
li.subpage a{
padding-left: 20px;
width: 175px;
font-style: italic;
}
li.subpage a:before{
content: "> ";
}
li.checked_menu a{
color: #000000;
font-weight: bold;
}
/*SIDEBAR*/
#sidebar_container{
margin-left: 25px;
border: 0px solid #B0B0B0;
padding: 25px;
width: 200px;
margin-bottom: 30px;
margin-top: -440px;
float: left;
clear:left;
}
#sidebar_heading{
float: left;
color: #000;
font-size: 140%;
margin-top: 15px;
}
#sidebar_content{
color: #73808A;
text-align: justify;
margin-top: 60px;
}
#sidebar_content h2{
color: #fff;
}
#sidebar_content a:hover{
color: #D98080;
text-decoration: underline;
}
/*INHALT*/
#Contenttop{
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontenttop.png);
width: 1000px;
height: 20px;
margin: 0px auto;
float: left;
}
#content{
width: 620px;
border: 1px solid #B0B0B0;
margin-right: 25px;
min-height: 400px;
padding: 25px;
float: right;
color: #000;
}
#UnterInhalt{
width: 1000px;
height: 20px;
float: left;
background-image: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigbottom.png);
margin-bottom: 50px;
}
#Platzhalter{
width: 1000px;
height: 3px;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigplatzhalter.png);
float:left;
}
#Linie{
width: 950px;
height: 1px;
float: right;
margin-right: 25px;
background: #B0B0B0;
}
/*FOOTER*/
#Footer{
width: 1000px;
background: url(http://img.webme.com/pic/f/feuerwehrcoswig/feuerwehrcoswigcontainer.png);
color: #B0B0B0;
text-align: center;
float: right;
}
#Footer a{
color: #000;
} |
|
|
↑
|
|
|
|
|
|
|
↑
|
|
|
-
feuerwehrcoswig
|
15.02.2012 um 19:23 (UTC)
Titel: |
|
|
o-4-n hat Folgendes geschrieben: Wenn sich der linke Rand auch ändert, hast du das gesamte padding verändert. Du solltest aber nur padding-top neu definieren.
und genau das bekomm ich nicht hin kannst du mir bitte helfen ?? |
|
|
↑
|
|
|
|
|
15.02.2012 um 23:30 (UTC)
Titel: |
|
|
Was daran bekommst du nicht hin?
Du musst einfach nur die padding-top Eigenschaft ändern.
Innenabstand des Contents von oben
Bisher definierst du das padding für oben, rechts, unten und links in einem:
Zitat: #content{
width: 620px;
border: 1px solid #B0B0B0;
margin-right: 25px;
min-height: 400px;
padding: 25px;
float: right;
color: #000;
}
Wichtig ist, dass spätere Anweisungen frühere überschreiben => Du musst das padding-top später definieren, als das allgemeine padding.
Du kannst aber auch alles in einem definieren:
Zitat: padding:XXpx 25px 25px;
Das grüne, wäre in diesem Fall das padding-top.
PS: Wenn man das CSS Design nutzen möchte sollte man solche grundlegende Dinge ohne Hilfe hinbekommen. ______________ mfg
o-4-n
"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]
*** Die Suchfunktion ist KEINE tödliche Krankheit! ***
Eventplanung, Equipment, Zeltverleih, Catering
Zuletzt bearbeitet von o-4-n am 16.02.2012, 01:15, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
-
feuerwehrcoswig
|
16.02.2012 um 08:27 (UTC)
Titel: |
|
|
o-4-n hat Folgendes geschrieben: Was daran bekommst du nicht hin?
Du musst einfach nur die padding-top Eigenschaft ändern.
Innenabstand des Contents von oben
Bisher definierst du das padding für oben, rechts, unten und links in einem:
Zitat: #content{
width: 620px;
border: 1px solid #B0B0B0;
margin-right: 25px;
min-height: 400px;
padding: 25px;
float: right;
color: #000;
}
Wichtig ist, dass spätere Anweisungen frühere überschreiben => Du musst das padding-top später definieren, als das allgemeine padding.
Du kannst aber auch alles in einem definieren:
Zitat: padding:XXpx 25px 25px;
Das grüne, wäre in diesem Fall das padding-top.
PS: Wenn man das CSS Design nutzen möchte sollte man solche grundlegende Dinge ohne Hilfe hinbekommen.
hab dank nun klappt es so wie ich es wollte
ps: besuche momentan extra eine CSS schulung damit ich was lerne aber soweit bin ich noch nicht ...wie du gesehen hast wurde die HP zu dem Zeitpunkt von Jemand anderen gemacht ich habe sie nur eingebaut
Thema darf geschlossen werden |
|
|
↑
|
|
|
|
|
16.02.2012 um 09:28 (UTC)
Titel: |
|
|
feuerwehrcoswig hat Folgendes geschrieben: Thema darf geschlossen werden
Dann vielen Dank an o-4-n, und danke für die Rückmeldung 
-CLOSED-
Gruß,
TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
|
↑
|
|
|
|
