Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag10.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;
}
Beitrag10.02.2012 um 16:33 (UTC)    
Titel: Re: Design Hilfe zum Seiteninhalt

Hallo,

feuerwehrcoswig hat Folgendes geschrieben:
den abstand zum von oberen seiten inhalt eine stelle den möchte eine "Breadcrumbs-Navigation erstellen" bzw habe es schon

Question Question Question

Nochmal bitte auf deutsch.
Am besten machst du auch einen Screenshot.
______________
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
Beitrag10.02.2012 um 23:41 (UTC)    
Titel: Re: Design Hilfe zum Seiteninhalt

o-4-n hat Folgendes geschrieben:
Hallo,

Question Question Question

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
Beitrag11.02.2012 um 22:08 (UTC)    
Titel:

Das links ist das margin-top in folgendem Block:
Code:
ul#nav{
margin-top: 70px;
margin-left: -40px;
}


Für das andere wäre der Link zu der entsprechenden Seite hilfreich, damit man nicht deinen kompletten CSS Code Analysieren muss.
______________
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
Beitrag12.02.2012 um 09:49 (UTC)    
Titel:

Link zu den Seiten !

http://testcoswig.de.tl/Home.htm

http://testcoswig.de.tl/Kontakt.htm

http://testcoswig.de.tl/Presseberichte.htm

http://testcoswig.de.tl/Test-Eins.ae.tze-2012.htm

-----------------------------------------------------------------

Danke erstmal schon für die Navi-hilfe
Beitrag13.02.2012 um 16:07 (UTC)    
Titel:

Habe gleich noch eine Frage

Hier das Bild dazu Arrow http://img.webme.com/pic/f/feuerwehrcoswig/hpbk1.jpg


Zuletzt bearbeitet von feuerwehrcoswig am 13.02.2012, 17:11, insgesamt einmal bearbeitet
Beitrag13.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
Beitrag14.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;
}
Beitrag14.02.2012 um 16:22 (UTC)    
Titel:

Wenn sich der linke Rand auch ändert, hast du das gesamte padding verändert. Du solltest aber nur padding-top neu definieren.
______________
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
Beitrag15.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 ??
Beitrag15.02.2012 um 23:30 (UTC)    
Titel:

Was daran bekommst du nicht hin?

Du musst einfach nur die padding-top Eigenschaft ändern.
Zitat:
padding-top:XXpx;

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
Beitrag16.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.
Zitat:
padding-top:XXpx;

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
Beitrag16.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 Wink

-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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de