tabellen nebeneinander

katschipatschi · 14.07.2011

Hallo,
versuche mich gerade ein wenig mit css.

Habe div angelegt (footer), und in dem Footer habe ich tabellen angelegt, die nebeneinander stehen sollen (Zimmer, Apparements und mit eienm größeren Abstand dann Kontakt). Leider werden die Tabellen nicht nebeneinander angezeigt sondern untereinander. kann mir jemand vl weiterhelfen, wie ich sie nebeneinander bringe?? Ich schaffs irgendwie nicht! Vielen Dank für eure Hilfe.

Code:

</div>
<div id="footer2_zimmer"><table align="left" style="color:#FFFFFF;  <FONT FACE="Verdana"; <table width="330px">
<tr><td></td></tr>

<table align="left" style="color:#FFFFFF; FONT FACE="Verdana"; <table width="120px">
<tr>
  <td><font face="Arial"><a href=""><font color="FFFFFF">Zimmer</a></font></td></tr>
<table align="left" style="color:#FFFFFF; <FONT FACE="Verdana"; <table width="510px">
<tr>
<td><font face="Arial"><a href=""><font color="FFFFFF">Appartements</font></td></tr>

<table align="left" style="color:#FFFFFF; <FONT FACE="Verdana";
<tr>
<td><font face="Arial"><a href=""><font color="FFFFFF">Kontakt</font></td></tr>

</div>
</body>

</html>

pixelpur · 14.07.2011

AW: tabellen nebeneinander

setze mal in deine Tabellen in die styles "float:left;"

Paric · 14.07.2011

AW: tabellen nebeneinander

nun, ich schau mir den code lieber gar nicht erst an, denn der ist grauenhaft.

zu Deinem Problem.

Verpasse den Tabellen jeweils ne id (z.B id="tabell1" und id="tabelle2").

und in der css-datei steht dann sowas in der art wie:

Code:

#tabelle1 {
   float: left;
}

#tabelle2 {
  float: right;
}

ans316 · 14.07.2011

AW: tabellen nebeneinander

Hier handelt es sich doch um verlinkungen.

warum machst du die nicht in einer liste?

katschipatschi · 14.07.2011

AW: tabellen nebeneinander

@ans: Weil die Verlinkungen unterpunkte sind, und die sollen nebeneinander stehen.

@paric: grauenhaft, hmm das klingt leider nicht so positiv

... wie müsste bzw. wo müsste ich die id in meinem code genau setzen??

Danke schonmal, lg Kathrin

ans316 · 14.07.2011

AW: tabellen nebeneinander

@ans: Weil die Verlinkungen unterpunkte sind, und die sollen nebeneinander stehen.

die kann man doch mit margin und padding ausrichten

sokie · 14.07.2011

AW: tabellen nebeneinander

also nach dem quelltext kann da nur bockmist be herauskommen, und da die Tabelle ohnehin der falsche container für eine liste von liks ist, wird auch die Struktur nicht wirklich klar.
wie ans316 schon angedeutet hat, ist hier die liste sicherlich sinnvoller.

katschipatschi schrieb:
Weil die Verlinkungen unterpunkte sind, und die sollen nebeneinander stehen.

für das Aussehen ist das CSS zuständig.

beispiel

HTML:

<ul id="footermenu">
  <li><a href="zimmer.html">Zimmer</a></li>
  <li><a href="appartements.html">Appartements</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

mehr markup braucht es dort nicht
CSS:

Code:

#footermenu{
  width: 400px; /*hier natürlich deine Werte eintragen*/
  list-style: none;
}
#footermenu li{
  display: inline;
  margin-roght: 20px; /* hier deine Werte */
}
#footermenu a{
  color: #ffffff;
  font-family: verdana, helvitia, sans;
}

du siehst das die struktur (liste) so logisch ist, und das html übersichtlicher.
alle Dinge die das Aussehen beschreiben sind im css notiert.

katschipatschi · 14.07.2011

AW: tabellen nebeneinander

vielen dank für die vielen Antwoten.

Meine Code war echt bockmist *g*

habe alle tabellen gellöscht, und alles nur mit div gemacht und float lef und mit margin left, klappt super, jetzt habe ich nur noch ein problem,

habe in der css datei folgenden hover effekt definiert:

Code:

}

a:visited{

color:#3e1f06;
text-decoration: none

}    
    
a:link{

    color:#3e1f06;
    text-decoration: none


}
a:hover{color:#6a9b32;
        text-decoration: none

Ich will aber dass dieser Effekt nicht auf allen links wikt.auf diese links soller nicht wirken. die sollen einfach nur weiß bleiben, ohne hover effekt:

Code:

<div id="footer2_galerie">
    <div id="link1"><a href="haus.html">Haus</a></div>
    <div id="link2"><a href="bauernhof.html">Bauernhof</a></div>
    <div id="link3"><a href="wellness.html">Wellness</a></div>
    <div id="link4"><a href="galerie.html">Galerie</a></div>
    <div id="link5"><a href="kontakt.html">Kontakt</a></div>

</div>

jemand eine Ahnung wie ich das hinbekomme??

lg p

pixelpur · 14.07.2011

AW: tabellen nebeneinander

Also entweder machst du es bei den jeweiligen div Layern. Also nach dem Prinzip .div1 a {BLAU} .div2 a {LILABLASSBLAU} oder wie in deinem Fall, dass du den den Links Klassen zuweist. Du musst nicht allen einen eigenen div geben. Aber wenn du es so machen willst dann wie oben beschrieben.

Paric · 15.07.2011

AW: tabellen nebeneinander

HTML:

#footer2_galerie a,   #footer2_galerie a:visited,  #footer2_galerie a:visited, #footer2_galerie a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

katschipatschi · 15.07.2011

AW: tabellen nebeneinander

Guten morgen

Vielen Dank für eure Hilfe

Gester hatte ich ja gedacht, ich habe mein Prob. gelöst, habe die Tabellen gelöscht alles mit div's gemacht, und mit float left nebeneinander positioniert, leider hat das ganze nur in der Vorschau funktioniert, sobald ich meine Website online gestellt habe, waren sie auf einmal wieder untereinander. Ich poste euch noch einmal meinen jetztigen code und ein bild, damit ihr besser vertehen könnt was ich meine

Code:

<div id="footer2_galerie"> 
    <div id="link1"><a href="haus.html">Haus</a></div> 
    <div id="link2"><a href="bauernhof.html">Bauernhof</a></div> 
    <div id="link3"><a href="wellness.html">Wellness</a></div> 
    <div id="link4"><a href="galerie.html">Galerie</a></div> 
    <div id="link5"><a href="kontakt.html">Kontakt</a></div> 
 
</div>

css:

Code:

} 
#container #footer2_galerie { 
   height: 20px; 
   width: 1017px; 
   background-repeat: no-repeat; 
   font-size: 11px; 
   background-image: url(../slices/hausfooterbottom.png); 
   color: #FFF; 
   font-family: Verdana, Geneva, sans-serif; 
   font-style: normal; 
   text-decoration: none; 
       
} 
#footer2_galerie #link1 { 
   float: left; 
   width: 35px; 
   margin-left: 195px; 
} 
#footer2_galerie #link2 { 
   float: left; 
   width: 80px; 
   margin-left: 85px; 
} 
#footer2_galerie #link3 { 
   float: left; 
   width: 75px; 
   margin-left: 50px; 
} 
#footer2_galerie #link4 { 
   float: left; 
   width: 70px; 
   margin-left: 35px; 
} 
#footer2_galerie #link5 { 
   float: left; 
   margin-left: 340px; 
}

hier noch ein bild, damit ihr euch vorstellen könnt was ich meine, die Links unten sind gemeint ( Gästehaus, Bauernhof, Wellness, Galerie und Kontakt)

Uploaded with

Paric · 15.07.2011

AW: tabellen nebeneinander

wieso machst du das alles so kompliziert?

HTML:

<div id="footer2_galerie">
  <ul>
    <li><a href="haus.html">Haus</a></li>
     <li><a href="bauernhof.html">Bauernhof</a></li>
     <li><a href="wellness.html">Wellness</a></li>
     <li><a href="galerie.html">Galerie</a></li>
     <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</div>

css:

Code:

#footer2_galerie ul {
  list-style-type: none;
}

 #footer2_galerie li {
   display: inline;
   margin-right: 20px;
}

#footer2_galerie a, #footer2_galerie a:visited, #footer2_galerie a:hover {
   color: #ffffff;
}

katschipatschi · 15.07.2011

AW: tabellen nebeneinander

@Paric, wenn ich das mache funktionierts zwar, aber mein hintergrund bild ist verschwinden, also ich meine den braunen balken hinter Gästehaus, bauernhof etc...
Des weiteren müsste ja Gästehaus, Bauernhof usw.. unterschiedlich eingerückt sein?

Paric · 15.07.2011

AW: tabellen nebeneinander

Du musst natürlich alle anderen css-formatierungen mit reinnehmen...

Code:

#footer2_galerie {
     height: 20px;
     width: 1017px;
     background: url(../slices/hausfooterbottom.png) no-repeat;
     font: normal 11px Verdana, Geneva, sans-serif;
     text-decoration: none;

katschipatschi · 18.07.2011

AW: tabellen nebeneinander

@ Panic:

Code:

#footer2_galerie ul {
  list-style-type: none;
height: 20px;
     width: 1017px;
     background: url(../slices/hausfooterbottom.png) no-repeat;
     font: normal 11px Verdana, Geneva, sans-serif;
     text-decoration: none;
}

 #footer2_galerie li {
   display: inline;
   margin-right: 20px;
}

#footer2_galerie a, #footer2_galerie a:visited, #footer2_galerie a:hover {
   color: #ffffff;
}

wär das so richtig??

katschipatschi · 18.07.2011

AW: tabellen nebeneinander

Hallo lieber Paric,

jetzt bin ichs noch einmal, danke für deine Vorschlag, aber das funkt. nur halb. Jeztt habe ich das Prob. das 1. die Zeile nach oben einen Abstand hat und 2. ich mit margin right: nur einen abstand zw. den Links schaffe. ich möchte aber die links einrücken, so dass sie nach dem grünen gras stehen. ist das irgendwie möglich?

hier noch einmal mein akt. code + bild.

Code:

<div id="footer2_galerie">
  <ul>
    <li><a href="haus.html">Haus</a></li>
     <li><a href="bauernhof.html">Bauernhof</a></li>
     <li><a href="wellness.html">Wellness</a></li>
     <li><a href="galerie.html">Galerie</a></li>
     <li><a href="kontakt.html">Kontakt</a></li>
  </ul>

</div>

Code:

}



#footer2_galerie ul {
  list-style-type: none
   width: 1017px;
   background: url(../slices/hausfooterbottom.png) no-repeat;
   font: normal 11px Verdana, Geneva, sans-serif;
   text-decoration: none;
   
}

 #footer2_galerie li {
   display: inline;
  

}

#footer2_galerie a, #footer2_galerie a:visited, #footer2_galerie a:hover {
   color: #ffffff;
   font-family:Verdana, Geneva, sans-serif;
   font-size:10px;
 
   
}

Uploaded with

Myhar · 18.07.2011

AW: tabellen nebeneinander

Warum gibst du dem ul einen Hintergrund?
Und warum wrappst du die ul in ein einzelnes div, das könnte man wohl auch noch einsparen.
Gib jedem Link das Grasbüschel als HG, dann bleibt das ganze auch noch skalierbar.

Code:

#footer2_galerie a {background:(url-zu-deine-grasbüschelbild.png) no-repeat left top; margin-left: 50px;} /*Werte bitte anpassen, bzw. margin-right verwenden falls es dir besser passt.*/

katschipatschi · 18.07.2011

AW: tabellen nebeneinander

@Myhar: Danke für deine Hilfe, dass mit dem link klappt jetzt super.
Jetzt müsste ich nur noch die links soweit einrücken, dass sie unter unterkunft stehen, dass bekomme ich leider einfach irgendwie nicht hin?!?!

#footer2_galerie ul {
list-style-type: none
width: 1017px;
height: 20px;
font: normal 11px Verdana, Geneva, sans-serif;
text-decoration: none;
background-color: #963;
background-repeat: no-repeat;
margin: 0 0px;
}

#footer2_galerie li {
display: inline;
text-decoration: none;

}

#footer2_galerie a, #footer2_galerie a:visited, #footer2_galerie a:hover {
color: #ffffff;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
margin-left: 30px;
background-image: url(../../Websites/Oberegg/HP/gras.png);
background-repeat: no-repeat;
background-position: left;
padding-left:20px;
}

Myhar · 18.07.2011

AW: tabellen nebeneinander

Du möchstest ALLE Links unter Unterkunft stehen haben? Das geht sich doch niemals aus vom Platz her?
Falls nicht, formuliere neu.
Generell gibt es margin um den Abstand zu anderen Elementen festzulegen. Möchtest du die Liste einrücken, dann muss natürlich die Liste das ul bekommen. Möchtest du einen bestimmten Link einrücken, dann braucht der bestimmte Link das margin (und wohl noch eine Klasse, damit du den Link gesondert ansprechen kannst)

L. G.

katschipatschi · 18.07.2011

AW: tabellen nebeneinander

@Myhar:

Haus Bauernhof, Wellness, Galerie sollen im braunen untersten Balken genau paralell unter Unterkunft stehen, da wo in meine Bild oben die Grasbüschel stehen. Und Kontakt sollte ganz rechts stehen

. Wie mach ich das mit den Klassen genau?

Lg p.