Htmltabelle Border entfernen

G

gdfan

Guest
Hallo,
Ich bin gerade irgentwie zu doof per css den Rahmen der Tabellle zu entfernen.
Wie geht das noch einmal ??
Hier ist die html Seite:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body text="red" bgcolor="white" link="#FF0000" alink="#FF0000" vlink="white">
<table border="0" bordercolour="white">
<tr>
<th valign="bottom" align="center" height="150" width="800" colspan="3" background="header.png">
</th>
</tr>
<tr>
<td  width="200" height="450" background="menü.png">
<div id="menu">
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>
</div>
</td>
<td width="600" height="450" background="text.png" ><h1 align="center">Hi</h1>
<p align="center">Hallo <br>
Hier kommt mal Text</p>
</td>
</tr>
</body>
</html>
Und hier der Stylecheet:
Code: 
body {
        font-family: Georgia, "Times New Roman",
        Times, serif;
        background-color: black   }
     H1 { color: white }
     ul.navbar li {
       background: none;
       padding: 0.1em;
       }
     #navbar {
     top: 5 px }
     ul.navbar a {
       text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: blue }
    #menu {
  width: 200px;
  height: 450px;
  float: left;
Nicht lachen ich bin noch anfänger:D:D
Außerdem ist das nur eine verusch Seite, an der ich html und css lerne, also nicht über das Desing wundern^^, odeer über die Sachen die draufstehen.
Der code stimmt so oder kann ich da noch etwas besser machen??

vielen Dank
mfg
Gdfan
 
also ich muss schon sagen, auf die idee ne liste in ner tabelle zu verschachteln bin ich auch noch nich gekommen.
also ich werd aus deinem quelltext nich so ganz schlau. was willste damit erreichen und wie soll des ganze mal aussehen. dann kann ich dir helfen. im moment sieht mir des noch nen bissel nach kauderwelsch aus.:ka:
 
ähhhhhhh. wups dass muss mir abhandegekommen sein:D:D:D
ähhh ne bessere idee. Es ist unsichbar, aber eigentlich da:D:D:D:D

nein, ich habs zwar mal gemahct, aber nun ist es weg:what:. Egal ich mach einfach ein neues:D:D

Aber noch mal eien Frage, was passiert dann wenn das weg ist?ß Braucht dann die Seite länger zum laden da der Browser das Tag erst hinzufügen muss oder was sind die Auswirkungen??
Und vielen Danke für den Hinweis:)
 
Ne, wenn die Tabelle nicht geschlossen wird, wird sie nicht so dargestellt, wie sie sein soll. Eigentlich gar nicht. Und beim Parsen weiß der Browser natürlich nicht, wo die Tabelle beendet sein soll, wenn da nichts steht.

Nimm einfach mal Deinen geposteten Code und schließe das table-Tag. Dann hast Du den Header oben, links das Menü und rechts den Content. Schaut dann schon mal nach was aus. ;)
 
ich finde den ganzen quelltext nen bissel umständlich. habe aber mittlerweile glaube ich verstanden, was das werden soll. also ich würde jeden teil in einen eigenen div packen, und die dann in css per postition: ;
anordnen. also so weit ich weiß gibts da fixed, absolute, inherite und float. kuck aber sicherheitshalber nochmal bei css4you.de, die ham da ne ziemlich gute beschreibung zu.
 
So siehst nun aus:)
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body text="red" bgcolor="white" link="#FF0000" alink="#FF0000" vlink="white">
<table border="0" bordercolour="" cellspacing="0" align="center">
<tr>
<th valign="middle" align="center" height="150" width="800" colspan="3" background="header.png">
<b>Laaaaan</b></th>
</tr>
<tr>
<td  width="200" height="450" background="menü.png">
<div id="menu">
<ul class="navbar">
  <li><a href="index.html">Homepage</a>
  <li><a href="musings.html">Musik</a>
  <li><a href="town.html">Laaan</a>
  <li><a href="links.html">Links</a>
  <li><a href="links.html">Links</a>
</ul>
</div>
</td>
<td width="600" height="450" background="text.png" ><h1 align="center">Hi</h1>
<p align="center">Hallo <br>
Hier kommt mal Text</p>
</td>
</tr>
</table>
</body>
</html>

so gut oder kann ich da noch was besser machen??
mfg gdfan
 
Ich habe noch eine Frage.
Wie kann ich festlegenn dass die Seite auf einem Breitbildmonitor breit angezeigt wird und sonst halt kleiner???
So wie das Forum.

mfg
gdfan
 
Indem Du die Breite nicht mehr absolut in Pixeln angibst, sondern relativ in Prozent, z.B. bei einer dreispaltigen Tabelle 33% für jede Spalte. Wenn Du den Browser zum Fenster verkleinerst, kannst Du ja den rechten Rand des Fensters nach links und rechts verschieben. Die Tabelle bleibt immer im Browserfenster, nur die Spalten werden abhängig von der angezeigten Breite breiter oder schmaler, nehmen aber immer 33% der verfügbaren Breite ein.

Man kann absolute und relative Werte mischen, das bekommt aber nicht unbedingt jedem Browser.

Wenn ich Zeit habe, überarbeite ich mal Deinen Quellcode und stell ihn hier ein. Ich nehme die ganzen Inline-Styles raus und schreib sie in die styles.css und noch einige weitere Geschichten.
 
jetztaber schrieb:
Indem Du die Breite nicht mehr absolut in Pixeln angibst, sondern relativ in Prozent, z.B. bei einer dreispaltigen Tabelle 33% für jede Spalte. Wenn Du den Browser zum Fenster verkleinerst, kannst Du ja den rechten Rand des Fensters nach links und rechts verschieben. Die Tabelle bleibt immer im Browserfenster, nur die Spalten werden abhängig von der angezeigten Breite breiter oder schmaler, nehmen aber immer 33% der verfügbaren Breite ein.

Man kann absolute und relative Werte mischen, das bekommt aber nicht unbedingt jedem Browser.

Wenn ich Zeit habe, überarbeite ich mal Deinen Quellcode und stell ihn hier ein. Ich nehme die ganzen Inline-Styles raus und schreib sie in die styles.css und noch einige weitere Geschichten.
Zum Vergrößern anklicken....
Vielen Dank für den Tip. ich werde es nacher mal ausprobieren.
Wenn du das machen könntest wäre ich dir unendlich dankbar:)
Ich habe noch eine Frage. Wie bestimme ich die Position eines Elementes (z.B. einer Überschrift) pixelgenau. Sodass z.B. Die linke-obere-Ecke genau bei 120/50 ist??(<-- Koordinatensytemdaten oder geht das nicht mit einem Koordiantensystem in dem 1=1px ist??)

Schon mal vielen Dank für euere Hilfe
mfg
gdfan
 
Hier ein bisschen CSS zum Nachdenken! ;)

Position, top, left, right, width, height sind die Antworten auf Deine Frage.

Code: 
@charset "utf-8";
/* CSS Document */

body {
/*    background-image: url(Images/bg_body.jpg); */
    background-color: #CC0000;
    font-family:SimSun, Verdana, Arial, serif;
}
#container {
    position:relative;
    top:0px;
    margin:0px auto;
    width:909px;
    height:auto;
}
#rbvheader {
    position:relative;
    top:0px;
    width:909px;
    height:128px;
    background: url(Images/bg_main_r1_c1.jpg) repeat-x;
}
#rbvbody {
    position:relative;
    top:0px;
    left:0px;
    width:909px;
    height:auto;
    background-color:#CC0000;
}
#rbvcontent {
    position:relative;
    top:0px;
    left:0px;
    bottom:0px;
    width:809px;
    height:auto;
    background: url(Images/bg_main_r2_c1.jpg) repeat-y;
    line-height:120%;
}
#rbvmenu {
    position:absolute;
    top:0px;
    right:0px;
    width:101px;
    height:auto;
}
#rbvfooter {
    position:relative;
    width:909px;
    height:128px;
    background: url(Images/bg_main_r3_c1.jpg) repeat-x;
}
table {
    border-collapse:collapse;
}
td, tr {
    padding:0px;
}
td img {
    display: block;
    border:none;
}
table.europe {
    width:800px;
    height:800px;
    border:none;
}
table.navigation {
    width:100px;
    border-left:#A38A48 1px solid;
}
table.content {
    width:800px;
    margin-bottom:5px;
}
td.image {
    width:535px;
    height:auto;
}
td.image img {
    /*margin-top:5px;*/
    margin-left:6px;
    /*margin-right:auto;*/
    /*margin-bottom:5px;*/
}
td.text {
    vertical-align:top;
    padding:0px 10px 0px 9px;
    margin:0px 5px;
    width:250px;
    height:auto;
    border-left:#E32040 solid 1px;
 
jetztaber schrieb:
Hier ein bisschen CSS zum Nachdenken! ;)

Position, top, left, right, width, height sind die Antworten auf Deine Frage.

Code: 
@charset "utf-8";
/* CSS Document */

body {
/*    background-image: url(Images/bg_body.jpg); */
    background-color: #CC0000;
    font-family:SimSun, Verdana, Arial, serif;
}
#container {
    position:relative;
    top:0px;
    margin:0px auto;
    width:909px;
    height:auto;
}
#rbvheader {
    position:relative;
    top:0px;
    width:909px;
    height:128px;
    background: url(Images/bg_main_r1_c1.jpg) repeat-x;
}
#rbvbody {
    position:relative;
    top:0px;
    left:0px;
    width:909px;
    height:auto;
    background-color:#CC0000;
}
#rbvcontent {
    position:relative;
    top:0px;
    left:0px;
    bottom:0px;
    width:809px;
    height:auto;
    background: url(Images/bg_main_r2_c1.jpg) repeat-y;
    line-height:120%;
}
#rbvmenu {
    position:absolute;
    top:0px;
    right:0px;
    width:101px;
    height:auto;
}
#rbvfooter {
    position:relative;
    width:909px;
    height:128px;
    background: url(Images/bg_main_r3_c1.jpg) repeat-x;
}
table {
    border-collapse:collapse;
}
td, tr {
    padding:0px;
}
td img {
    display: block;
    border:none;
}
table.europe {
    width:800px;
    height:800px;
    border:none;
}
table.navigation {
    width:100px;
    border-left:#A38A48 1px solid;
}
table.content {
    width:800px;
    margin-bottom:5px;
}
td.image {
    width:535px;
    height:auto;
}
td.image img {
    /*margin-top:5px;*/
    margin-left:6px;
    /*margin-right:auto;*/
    /*margin-bottom:5px;*/
}
td.text {
    vertical-align:top;
    padding:0px 10px 0px 9px;
    margin:0px 5px;
    width:250px;
    height:auto;
    border-left:#E32040 solid 1px;
Zum Vergrößern anklicken....
Vielen vielen Dank.
Aber Muss ich noch was in der Htmldatei verändern???
mfg
gdfan
 
Akkuschrauber schrieb:
du musst den ganzen dingern ids oder names geben. natürlich die passenden.
Zum Vergrößern anklicken....
Sorry aber ich beschäftige mich erst seit 2 Wachen mit html und css, daher weiß ich nicht genau was du meinst:ugly:
Also könntest du das bitte nochmal erklären, am besten mit Beispieltag:D, damit auch ich das verstehe:)

Vielen Dank an euch das ihr mir helft, meine Noobfragen zu beantworten:) und mir das zu erklären

Lukas
 
Er meint, da wo die Raute (#) steht, werden die Eigenschaften der Divs definiert. Diese heben dann die in body definierten Eigenschaften auf oder ergänzen sie und hinter der Raute steht der Name des Div-Tags in der CSS-Datei. Der wird dann natürlich in der HTML-Datei verwendet, sonst werden die definierten Eigenschaften ja nicht gefunden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Misanthrop68
Frauenfußball EM 2025
6 7 8
Antworten
147
Aufrufe
10K
Threshold
Threshold
Alwiat
Neubau: Allround-PC mit Gaming-Fokus, Budget 2000-3000
Antworten
14
Aufrufe
1K
Hellhammer
Hellhammer
M
Upgrademöglichkeit oder eher alles nur veralteter Schrott
Antworten
11
Aufrufe
1K
Prozessorarchitektur
Prozessorarchitektur
I
[Review] MSI MPG Z690 Edge WIFI DDR4
2
Antworten
21
Aufrufe
13K
IICARUS
I
N
Review zum LG UltraGear Gaming Speaker GP9 - Klangwunder oder Brüllwürfel?
Antworten
0
Aufrufe
2K
n!Faculty
N
Oben Unten
Zurück