Vorlagendesign anpassen (Tabellen)

[beno12]

CSS Design anpassen

Hallo

Ich würde gerne meine erste kleine Homepage erstellen, und habe mich für eine hübsche Vorlage entschieden, um nicht ganz bei "0" anfangen zu müssen.

Leider ist der Inhaltsbereich in 2 Tabellen (links und rechts) getrennt, ich würde hier gerne den rechten Inhaltsbereich über die ganze Seitebreite erstrecken lassen. Leider schaffe ich es nicht die linke Tabelle zu entfernen ohne das Konstrukt unbrauchbar zu machen.

Danke für Tips, die mich meinem Ziel näherbringen

 

[vitus37]

Hallo

Ich würde gerne meine erste kleine Homepage erstellen, und habe mich für eine hübsche Vorlage entschieden, um nicht ganz bei "0" anfangen zu müssen.

Damit fängst du im Grunde genommen genauso bei null an, da diese Seite falsches HTML ist. Bei dieser Seite werden Tabellen für das Aussehen der Seite genutzt, Tabellen sind jedoch nur für tabellarische Daten und HTML nur für die inhaltliche Auszeichnung. Alles was mit dem Aussehen zu tun hat schreibst man mit CSS.

Leider ist der Inhaltsbereich in 2 Tabellen (links und rechts) getrennt, ich würde hier gerne den rechten Inhaltsbereich über die ganze Seitebreite erstrecken lassen.

Versuche das am besten garnicht erst, da diese Vorlage wie schon gesagt falsch ist.

Leider schaffe ich es nicht die linke Tabelle zu entfernen ohne das Konstrukt unbrauchbar zu machen.

Ich würde dir empfehlen eben doch bei null anzufangen und dich mit einem guten Tutorial schritt für Schritt in die Materie einzuarbeiten, denn lernen musst du es so oder so.

 

[Dangerzone]

Es wäre besser wen du bei 0 anfängst und es lernst hier die Seite ist gut zum lernen
da habe ich das meiste auch gelernt

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Ich finde die Seite klasse

Viel Spaß noch Dangerzone

 

[Efchen]

SelfHTML geht leider nicht mehr gut genug auf den Unterschied zwischen logischer und physischer Inhaltsauszeichnung ein.

Besser zum Einstieg ist diese Seite: Einführung | Webdesign mit XHTML und CSS

SelfHTML ist eher was für Fortgescrittene und als Referenz, wenn man wirklich verstanden hat, wozu HTML eigentlich ist!

 

[beno12]

Hallo,

und Danke mal vorab für die Hinweise in Richtung CSS.
Ich habe nun auf CSS-Basis etwas "zusammengebastelt", und einige Fragen dazu.

1.0 Wie kriege ich die Navigationsleiste im "framecontent" rechtsbündig ?
1.1 Den links möchte ich noch ein Bild und kleinen Begrüssungstext einbauen.

2.0 Wie schaffe ich es das der Inhalt der Hyperlinks im "maincontent" erscheinen ?
2.1 Kann ich die Hyperlinksgeschichte auch ins "layout.css" einbauen ?

So sieht die Seite im Moment aus. (Sorry Popup vom ISP)
Hier der Code der layout.css:

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 60px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: black;
color: white;
float:left;
font-size:93%;
line-height:normal;
}
#framecontent ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#framecontent li {
display:inline;
margin:0;
padding:0;
}
#framecontent a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#framecontent a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#framecontent a span {float:none;}
/* End IE5-Mac hack */
#framecontent a:hover span {
color:#FFF;
}
#framecontent a:hover {
background-position:0% -42px;
}
#framecontent a:hover span {
background-position:100% -42px;
}  

#maincontent{
position: fixed; 
top: 60px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 60px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

Danke für Hilfe und Tips !

p.s. Leider lässt sich die Überschrift des Threads nicht anpassen, sollte ich im CSS-Bereich posten ??