Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „tabellen nebeneinander“

katschipatschi

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

AW: tabellen nebeneinander

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

Paric

von allem ein bisschen

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

Nicht mehr ganz neu hier

AW: tabellen nebeneinander

Hier handelt es sich doch um verlinkungen.

warum machst du die nicht in einer liste?
 

katschipatschi

Nicht mehr ganz neu hier

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
 

sokie

Mod | Web

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.

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

von allem ein bisschen

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

Nicht mehr ganz neu hier

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

von allem ein bisschen

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

Nicht mehr ganz neu hier

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?
 
Zuletzt bearbeitet:

Paric

von allem ein bisschen

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

Nicht mehr ganz neu hier

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

Nicht mehr ganz neu hier

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

Hat es drauf

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

Nicht mehr ganz neu hier

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;
}
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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

Nicht mehr ganz neu hier

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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben