• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Spalten Einteilung

Status
Für weitere Antworten geschlossen.
F

ffxfreak

Neues Mitglied
hallo erstmal,
bin noch nen neuling in html(vorweg als warnung gedacht :) )
also habe mir nen template genommen um gut einsteigen zu können
und habe die seite so wie ich sie mir vorstelle auch fast fertig.
ich möchte meine seite so wie in der unten gezeigten grafik haben.
die obere leiste und die linke spalte sind schon vorhanden(war beim template schon dabei ;) ) jetzt wüsste ich gerne wie ich die rechte spalte hinbekomme. Oder besteht da ne gefahr bei das die seite so wie sie jetzt ist verloren geht?
hier habe ich den text der in der css stand(allerdings schon etwas mit rumgespielt,also nicht mehr original :D) :

Code: 
/* schriftstil,abstände */

body
{margin-top: 10px; margin-left: 10px; margin-right: 0px;margin-bottom: 10px; color: #000000;  background-color:#eaf1f7;
font: normal 12px/18px  times, serif;
}


table,tr,td
{ color: #000000;font: normal 12px/18px  verdana, times, serif;}

/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #AABECA; scrollbar-base-color: #ffffff;
scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #bfd6e6;}


.logo {color:black;
height:181px;
background: #ffffff url("http://www.html.de/images/test.jpg") ;
background-position: 100% 0%;
}
.banner {-moz-opacity: 0.66;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=66);
opacity: 0.66;
border:solid 1px #000000;
background-color:#689bc0;}

.hpname{ color:#ffffff;
font-weight:normal;
letter-spacing:2px;

}

ul{
list-style-type:square;
}

.point1 {border:solid 1px black;background-color:#7095dc}
.point2 {border:solid 1px black;background-color:#CCDAF2}
.point3 {border:solid 1px black;background-color:#ffffff}

/* menue oben */

#menu2 a , #menu2 a:visited , #menu2 a:active {display:block;
color:#ffffff;
background: url("http://www.html.de/images/test.jpg");
text-decoration:none ;
font: normal 17px verdana, times, serif;
line-height:24px;
text-decoration:none ;
padding: 0px 0px 0px 0px;
text-align:center;
width:160px;
}

#menu2 a:hover{
color:#000000;
text-decoration:none ;
background: url("http://www.html.de/images/test.jpg");
}

/* allgemeine links im text */

a:link, a:visited, a:active{ font: normal 12px/18px verdana, times, serif;text-decoration:underline;color:#000000}

a:hover{ font: normal 12px/18px verdana, times, serif;text-decoration:none;background-color:#689bc0;
color:#ffffff;}

Ich bedanke mich schon mal im vorraus und bitte um Nachsicht ;)


teilenmu0.jpg
 
Zuletzt bearbeitet von einem Moderator:
Interessant ist da auch der HTML-Code, aber bitte gemäß Forenregeln mit dem [*code]-Tag auszeichnen.

Prinzipiell ist nur CSS für das Layout, soweit richtig, da brauchst Du nur dem Element, das rechts stehen soll ein "float:right" zu setzen. Aber bei "Template", "Spalte" und CSS-Definitionen für table schwant mir Böses.
 
Danke erst mal für die schnelle Antwort.
Wieso schwant dir da böses? :D
und wegen dem float befehl, wie mach ich das? ;ugl (nicht vergessen, me=noob)
sagen wir mal ich will an die rechte seite 2 oder 3 bilder untereinander setzen, wo muss dann der float befehl hin und was müsste drin stehen?
Ich hoffe nochmal auf Verständniss ;)
 
ffxfreak schrieb:
Wieso schwant dir da böses?
Zum Vergrößern anklicken....
Ich rieche Missbrauch von Tabellen zu Layout-Zwecken. Aber zeig halt mal Deinen Code her!

und wegen dem float befehl, wie mach ich das?
Zum Vergrößern anklicken....
Nix Befehl. CSS-Eigenschaft. HTML und CSS sind keine Programmiersprache, nur da gibt es Befehle.

sagen wir mal ich will an die rechte seite 2 oder 3 bilder untereinander setzen, wo muss dann der float befehl hin und was müsste drin stehen?
Zum Vergrößern anklicken....
Dann würdest Du die drei Bilder vermutlich mit einem geeigneten Tag gruppieren und diesem Element dann ein float:right zuweisen.

Ich hoffe nochmal auf Verständniss
Zum Vergrößern anklicken....
Hab ich. Aber erst den Code :-D
Wenn der Mist ist, wirds nicht so einfach gehen und Du musst vielleicht alles einreißen und neu machen. Wenn der annehmbar ist, dann musst Du vielleicht nicht viel machen.
 
Code: 
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage">
<meta name="description"
content="homepage" >
<title>homepage</title>


<script>

function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}

onload=BlurLinks;

</script>
<link rel="stylesheet" href="format.css" type="text/css">
</head>



<table align="center" bgcolor="#000000"  cellspacing="0" cellpadding="0" border="0" width="800" >
<tr>
<td  width="100%" >

<table   cellspacing="1" cellpadding="0" border="0" width="100%"  >

<tr>
<!--logo -->
<td    align="center" class="logo" >

]

</td><!--ende logo-->

</tr>

<td align="center"   width="100%"  class="leiste"   >

<table bgcolor="#93B9DB" width="100%"  border="0" cellpadding="0" cellspacing="0"  >
<tr>
<td>
<table    id="menu2" width="100%"  border="0" cellpadding="0" cellspacing="0,5"    >
<tr>
<td ><a href="index.html"  onfocus="this.blur()">Link</a></td>
<td ><a href="index.html" onfocus="this.blur()">Link</a></td>
<td ><a href="index.html"  onfocus="this.blur()">Link</a></td>
<td ><a href="index.html"  onfocus="this.blur()">Link</a></td>
<td ><a href="index.html"  onfocus="this.blur()">Link</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>


<tr>

<td valign="top" bgcolor="#ffffff"  width="100%" height="440" class="inhalt" >



<!-- beginn hauptinhaltstabelle--><table border="0" cellpadding="0" cellspacing="40"  width="100%" >

<tr>
<td valign="top" width="100%" >


<br>
<br>

<img src="images/test.jpg" width=116 height=79 align="left">
"text"


<p align="center"><a href="index.html" target="Nach Oben">
<a href="index.html">Nach Oben</a>


</td>
</tr>
</table>

</td>


</tr>
<tr>

</tr>

</table></td>
</tr>
</table>


</body>
</html>

so hier ist der code,hoffe könnt damit was anfangen und seit nicht zu hart zu mir :P
nochma danke für die hilfe ^^
 
Was mir gleich auffällt:

Direkt nachdem der Head geschlossen wird mit </head> muss der Body geöffnet werden mit <body>, erst danach kommen die ganzen Inhalte.

Das fehlt bei dir schonmal, genau wie der Doctype.
 
das mit dem "body" war mein fehler.
habe nen paar leerzeilen rausgelöscht und muss dem mit gelöscht haben(man bin ichn depp >.<)

und was ist nen doctype? ;ugl
 
Und Du solltest Dir das mal zu Gemüte führen: Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten (hab ichs doch gewusst)

Das heißt, wir brauchen jetzt wieder eine Erklärung, was HTML überhaupt ist...nee, da such ich Dir die zwei Threads raus, in denen ich mir den Wolf geschrieben habe...

Einmal hier: http://www.html.de/html-und-xhtml/20600-text-haengt-ueber-tabellenrand-heraus.html
Und einmal hier: http://www.html.de/html-und-xhtml/20606-scrollbares-td.html

Wenn dann noch Fragen sind, frag ruhig!
 
schau dir das mal an...ist viel eifnacher wie 50 tabellen..

Code: 
<html>
<head>
<title>test</title>
<style type="text/css">

        body   { 
            background-color: #FFFFFF;
            }

        #over     {
            height: 50em;
            width: 65em;
            margin: 10px auto;
            }

        #main   {
            float: left;
            height: 100%;
            width: 30em;
            border: #000000 2px solid;
            }


        #siderechts {
            float: left;
            margin: 0px 5px;
              width: 15em;
              height: 100%;
            border: #000000 2px solid;
            }


</style>
</head>

<body>



<div id="over">

<h1><img src=" " alt="" style="width:22.5em; height:2.5em;" /></h1>


    <div id="main"> mainfenster 
    </div>


    <div id="siderechts">
            <p>ich bin die rechte Seite</p>
    </div>

</div>

</body>

</html>

grüße...
 
thx,loon3y werde das erst mal nehmen ;)
thx auch an efchen und maxi.
werde mir die links zu einem späteren zeitpunkt durchlesen.
hoffe komme nun damit klar ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben