 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
sunnyflower
Threadersteller
Dabei seit: 16.09.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 27.01.2011 17:48
Titel Hilfe bei Homepage |
  |
|
sodele, habs nun endlich geschafft mich in html einzuarbeiten und habe nun meine erste seite mal aufgebaut.
Ich hätte ein paar frage und wäre über eure hilfe dankbar, ich denke ich muss noch viel lernen.
also die links funktionieren noch nicht, dachte ich mach zuerst einmal das grundgerüst. mit den links das kommt später! auch der flash banner wird noch optimiert.
Meine Seite:
meine seite
Ich hätte gerne neben dem Inhalt, also unten eine dritte spalte. Diese soll aber auf (fast) jeder Seite gleich sein. Also mit News usw. Wäre es möglich etwas zu machen, sodass ich nicht jedes mal, wenn eine Neuigkeit kommt, jedes html dokument, jeder seite öffnen muss und dies abändern muss? Sodass ich es vllt in einer externen Datei abspeichern kann.
in welchen div container muss ich die dritte spalte dann einbauen?
dann weiß ich nicht wo ich diesen abstand zwischen subnavi und inhalt eingebaut habe. kann mir jemand weiterhelfen, wo ich den verändern kann??
bin über hilfe sehr dankbar und würde mich sehr freuen, wenn der ein oder andere sich kurz zeit nimmt, falls meine fragen nicht zu kompliziert sind.
Vielen vielen dank.
meine css datei:
| Zitat: |
body {
margin: 0px;
background: url(img/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #444444;
}
h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #aaaaaa;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
border-bottom: 1px dotted #CC0001;
color: #e20031;
}
a:hover {
background: none;
}
#wrapper {
width: 1024px;
margin: 0 auto;
background: url(img/img04.jpg) no-repeat left top;
}
#wrapper .btm {
}
/* Header */
#header {
width: 1024px;
height: 105px;
margin: auto;
background: url(img/img02.jpg) repeat-y left top;
}
/* Logo */
#logo {
float: left;
width: 640px;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
float: left;
letter-spacing: -1px;
text-transform: lowercase;
font-size: 2.8em;
}
#logo h1 a {
color: #e20031;
}
#logo p {
float: left;
margin: 44px 0 0 0;
font: normal 13px Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #000000;
}
/* Menu */
#menu {
width: 1024px;
height: 44px;
background: url(img/img03.jpg) no-repeat left top;
margin: 0 auto;
padding: 0;
}
#menu ul {
margin: 0;
padding: 13px 0 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 3px;
padding: 5px 20px 7px 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
color: #ffffff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
}
#menu a:hover {
background: #e85252;
text-decoration: none;
}
#menu .first {
margin-right: 3px;
background: #f29b8a;
color: #aaaaaa;
}
/* Page */
#page {
width: 1024px;
margin: 0 auto;
padding-top: 20px;
}
/* Content */
#content {
float: right;
width: 610px;
padding: 20px 20px 0 0;
}
.post {
margin-left: 20px;
padding-bottom: 30px;
}
.post .title {
padding-left: 10px;
border-left: 4px solid #f29b8a;
color: #000000;
}
.post .title a {
background: none;
color: #444444;
border: none;
}
.post .title a:hover {
text-decoration: underline;
}
.post .meta {
background: #E0E0E0;
border-left: 4px double #F57601;
border-right: 4px double #F57601;
padding: 3px 10px 3px 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.post .meta .comments,.post .meta .permalink {
}
.post .entry {
padding: 10px 10px 10px 20px;
text-align: justify;
}
/* subnav */
#subnav{
color: #333;
text-align: left;
height: 350px;
width: 200px;
position: absolute;
float: left;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
background-color: #FFFFFF;
color: #333;
}
* html #subnav{ /*IE 6 only */
width: 147px; /*Box model bug: 180px minus all left and right paddings for #subnav */
}
#subnav ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#subnav li {
border-bottom: 1 px solid #000000;
margin: 0;
}
#subnav li a{
display: block;
padding: 7px 7px 7px 10px;
border-left: 8px solid #FFFFFF;
background-color: #FFFFFF;
color: #000;
text-decoration: none;
width: 100%;
}
html>body #subnav li a{ /*Non IE6 width*/
width: auto;
}
#subnav li a:hover{
border-left: 8px solid #e4002c;
background-color: #eeeeee;
color: #000000;
}
#subnav li a:active{
border-left: 8px solid #e4002c;
background-color: #eeeeee;
color: #000000;
}
</style>
/*subnav ende*/
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
#footer {
width: 1022px;
height: 35px;
margin: 0 auto;
background-image: url(img/footer.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-color: #FFFFFF;
padding: 2px;
background-repeat: no-repeat;
} |
|
|
| |
  |
 |
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: 
|
Verfasst Do 27.01.2011 18:24
Titel
|
|
|
| Zitat: | | dann weiß ich nicht wo ich diesen abstand zwischen subnavi und inhalt eingebaut habe. kann mir jemand weiterhelfen, wo ich den verändern kann?? |
| Code: | #content {
float: right;
width: 610px;
padding: 20px 20px 0 0;
} |
Dein Container #content ist 610 Pixel breit und wird rechts ausgerichtet. Daher kommt der Abstand. Wenn du den Container breiter machst, wird der Abstand kleiner.
| Zitat: | | Ich hätte gerne neben dem Inhalt, also unten eine dritte spalte. |
Wo genau? Darunter oder daneben?
| Zitat: | | odass ich es vllt in einer externen Datei abspeichern kann. |
Hast du auf deinem webserver PHP zu Verfügung?
|
|
| |
|
|
|
Anzeige
|
|
|
sunnyflower
Threadersteller
Dabei seit: 16.09.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 27.01.2011 22:01
Titel
|
|
|
super, also das mit der breite des inhalts hat schon mal geklappt!! vielen dank dafür.
ich hätte gerne rechts neben dem inhalt eine spalte für die news. etwa gleich breit wie die subnavi.
wäre dies ohne großen aufwand und erklärkünsten möglich?
php habe ich verfügbar.
und noch ne frage:
mein favicon funktioniert auch nicht. liegt aber auf gleicher ebene wie meine index.html
Zuletzt bearbeitet von sunnyflower am Do 27.01.2011 22:03, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Windhauch
Dabei seit: 01.08.2008
Ort: Saarland
Alter: 33
Geschlecht: 
|
Verfasst Fr 28.01.2011 09:55
Titel
|
|
|
Um eine dritte Spalte zu machen, musst du ein weiteres Div hinter das id="content" setzten.
id="content" muss dann float: left; erhalten und die Breite entsprechend der Breite des News-Containers verkleinert werden. So in etwa:
#content {
float: left;
width: 540px;/*580*/
padding: 20px 20px 0 20px;
}
#news {
float: right;
width: 200px;/*200*/
}
| Zitat: | | mein favicon funktioniert auch nicht. liegt aber auf gleicher ebene wie meine index.html |
Hm, benenne es mal in favicon.ico um  Das Icon sollte 16x16pc groß sein.
Zuletzt bearbeitet von Windhauch am Fr 28.01.2011 10:03, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
Flyerpost
Dabei seit: 21.11.2010
Ort: Brackenheim
Alter: 38
Geschlecht:
|
Verfasst Fr 28.01.2011 11:23
Titel
|
|
|
Also du kannst das Facicon auch unter gif. oder png. abspeichern.
Es kann auch 32px groß sein.
Das mit den News auf jeder Seite muss man mit PHP lösen. Hast du vielleicht daran gedacht ein CMS zu benutzen?
Da kann man Design kinderleicht anpassen.
|
|
| |
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
|
| |
|
|
sunnyflower
Threadersteller
Dabei seit: 16.09.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 28.01.2011 12:20
Titel
|
|
|
| Zitat: | Um eine dritte Spalte zu machen, musst du ein weiteres Div hinter das id="content" setzten.
id="content" muss dann float: left; erhalten und die Breite entsprechend der Breite des News-Containers verkleinert werden. So in etwa:
#content {
float: left;
width: 540px;/*580*/
padding: 20px 20px 0 20px;
}
#news {
float: right;
width: 200px;/*200*/
} |
okay super, herzlichen Dank!
Hat auch geklappt. allerdings verschiebt es jetzt och meine subnavi und die news nach unten. woran könnte das liegen?
dann hätte ich das ja schon alles.
Herzlichen Dank für die hilfe!!
meine seite
hab hier nochmal den aktuellen css code
| Zitat: |
body {
margin: 0px;
background: url(img/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #444444;
}
h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #aaaaaa;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
border-bottom: 1px dotted #CC0001;
color: #e20031;
}
a:hover {
background: none;
}
#wrapper {
width: 1024px;
margin: 0 auto;
background: url(img/img04.jpg) no-repeat left top;
}
#wrapper .btm {
}
/* Header */
#header {
width: 1024px;
height: 105px;
margin: auto;
background: url(img/img02.jpg) repeat-y left top;
}
/* Logo */
#logo {
float: left;
width: 640px;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
float: left;
letter-spacing: -1px;
text-transform: lowercase;
font-size: 2.8em;
}
#logo h1 a {
color: #e20031;
}
#logo p {
float: left;
margin: 44px 0 0 0;
font: normal 13px Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #000000;
}
/* Menu */
#menu {
width: 1024px;
height: 44px;
background: url(img/img03.jpg) no-repeat left top;
margin: 0 auto;
padding: 0;
}
#menu ul {
margin: 0;
padding: 7px 0 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 0px;
padding: 7px 20px 7px 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
color: #ffffff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
}
#menu a:hover {
background: #e85252;
text-decoration: none;
}
#menu .first {
margin-right: 3px;
background: #f29b8a;
}
/* Page */
#page {
width: 1024px;
margin: 0 auto;
padding-top: 20px;
}
/*NEWS*/
#news {
float: right;
width: 150px;
padding: 20px 20px 0 20px;
}
/* Content */
#content {
margin-left: 200px;
width: 540px;
padding: 20px 20px 0 20px;
}
.post {
margin-left: 20px;
padding-bottom: 30px;
}
.post .title {
padding-left: 10px;
border-left: 4px solid #f29b8a;
color: #e20031;
}
.post .title a {
background: none;
color: #444444;
border: none;
}
.post .title a:hover {
text-decoration: underline;
}
.post .meta {
background: #E0E0E0;
border-left: 4px double #F57601;
border-right: 4px double #F57601;
padding: 3px 10px 3px 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.post .meta .comments,.post .meta .permalink {
}
.post .entry {
padding: 10px 10px 10px 20px;
text-align: justify;
}
/* subnav */
#subnav{
color: #333;
text-align: left;
height: 350px;
width: 200px;
position: absolute;
float: left;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
background-color: #FFFFFF;
color: #333;
}
* html #subnav{ /*IE 6 only */
width: 147px; /*Box model bug: 180px minus all left and right paddings for #subnav */
}
#subnav ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#subnav li {
border-bottom: 1 px solid #000000;
margin: 0;
}
#subnav li a{
display: block;
padding: 7px 7px 7px 10px;
border-left: 8px solid #FFFFFF;
background-color: #FFFFFF;
color: #000;
text-decoration: none;
width: 100%;
}
html>body #subnav li a{ /*Non IE6 width*/
width: auto;
}
#subnav li a:hover{
border-left: 8px solid #e4002c;
background-color: #eeeeee;
color: #000000;
}
#subnav li a:active{
border-left: 8px solid #e4002c;
background-color: #eeeeee;
color: #000000;
}
</style>
/*subnav ende*/
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
#footer {
width: 1022px;
height: 35px;
margin: 0 auto;
background-image: url(img/footer.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-color: #FFFFFF;
padding: 2px;
background-repeat: no-repeat;
} |
|
|
| |
|
|
Windhauch
Dabei seit: 01.08.2008
Ort: Saarland
Alter: 33
Geschlecht:
|
Verfasst Fr 28.01.2011 13:09
Titel
|
|
|
#content {
margin-left: 200px; <- weg
width: 540px;
padding: 20px 20px 0 20px;
}
und die Reihenfolge der 3 Elemente stimmt nicht:
<div id="subnavi">
<div id="content">
<div id="news">
<br style="clear: both;" />
sollte funktionieren
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Homepage Creator oder Homepage Baukasten
Homepage via cms
eigene Homepage
Homepage-Gestaltung
Kostenlose Homepage
Homepage Programm
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
