Buttons nur untereinander sichtbar
Daniel...
- html
Hallo.
Ich bin hier neuim Forum, da ich mit meinem Folgenden Problem nicht weiterkomme:
Ich habe eine Tabelle mit Hintergrund in der ich Buttons einfügen will, die mit einer Mouseover Sprechblase belegt sind.
Das klappt auch alles wunderbar wäre da nicht nur 1 Schönheitsfehler: Die Buttons werden immer untereinander angezeigt und nicht, wie gewollt, nebeneinander.
Hier habe ich einmal den Quelltext:
Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haable</title>
<link rel="stylesheet" type="text/css" href="/BasicV2.css">
<link rel="stylesheet" type="text/css" href="/toggle.css">
<script type="text/javascript" src="/moo.js"></script>
<script type="text/javascript" src="/general.js"></script>
<script type="text/javascript" src="/toggle.js"></script>
<style type="text/css">
<!--
.banner {
background-image: url(/new/oben.png);
margin: auto;
height: 35px;
width: 600px;
}
.content_mid {
background-image: url(/mitte.png);
height: auto;
width: 600px;
margin: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.bottom {
background-image: url(/unten.png);
margin: auto;
height: 40px;
width: 600px;
}
body {
background-image: url(/bg.png);
}
-->
</style></head>
<body>
<div class="banner"></div>
<div class="content_mid">
<div align="center"><br />
<div class="TopMenu">
<div class="TopMenuIcon" id="TopMenuIcon"><div class="TopMenuIcon" id="TopMenuIcon">
<div id="Icon" style="top:-15px;" > <a href="help" onmouseover="tooltip.show('<b>Hilfe</b><br>Unsere Hilfe'); Aktivieren();" onmouseout="tooltip.hide();"><img src="/help.png" border="none" class="Icon"/></a></div>
<div id="Icon" style="top:-15px;" > <a href="help" onmouseover="tooltip.show('<b>Hilfe</b><br>Unsere Hilfe'); Aktivieren();" onmouseout="tooltip.hide();"><img src="/help.png" border="none" class="Icon"/></a></div>
</div>
</div>
<div class="bottom"></div>
</body>
</html>
Ich habe schon ein erzwungenes Leerzeichen mit zwischen den einzelnen Codes der Buttons probiert nur leider ohne Erfolg.
Hoffentlich könnt ihr mir weiterhelfen.
Liebe Grüße, Daniel.
Hi,
ich weis nicht ob ich dich jetzt richtig verstanden habe, aber Divs kann man nicht so einfach nebeneinander positionieren.
1. Möglichkeit:
Du weist den Divs das Attribut position:absolute; zu, das heist dass Sie absolut positioniert werden und du Ihnen mit left bzw. top eine genaue Position von oben bzw. von links zuweisen musst.
2. Möglichkeit.
Du weist den Divs das Attribut float:left; bzw. float:right; zu. Das ist ein kleiner css Hack. Eigentlich gedacht um Text um Bilder fliesen zu lassen, kann man aber auch hierzu wunderbar nutzen.
Wenn du jetzt z.B. folgendes Hast
<div>
<div>erster button</div>
<div style="float:left;">zweiter button</div>
<div style="float:left;">dritter button</div>
</div>
Dann hast du schön 3 Div-Buttons nebeneinander ;-)
Grüße
Der Gerch
PS: Das mit dem Leerzeichen tut nichts zur Sache.
Hi,
- Möglichkeit: [...]
- Möglichkeit. [...]
3. Möglichkeit: Aufhören, DIV-Suppe zu kochen, und stattdessen HTML-Elemente so einsetzen, dass sie die Struktur der Inhalte bestmöglich beschreiben.
MfG ChrisB
Hi, ich würde gerne eine andere Suppe kochen, nur habe ich mir diese ganzen schnipsel zusammengesucht und kann die von mir aus nicht einfach verändern.
Wie kann ich das denn schaffen?
Lerne die Schnipsel zu verändern ;-)
Hi,
Hi, ich würde gerne eine andere Suppe kochen, nur habe ich mir diese ganzen schnipsel zusammengesucht und kann die von mir aus nicht einfach verändern.
Wie kann ich das denn schaffen?
In dem du dich erst mal mit den Grundlagen von HTML und CSS beschäftigst.
MfG ChrisB
Danke, das hat mir vorerst schon einmal weitergeholfen.
Mein jetziges Problem ist, dass ich ja eine Tabelle mit einem Hintergrundbild habe. Nun, da der eine Button mit "left" ganz links liegt, ist es nicht mehr wie der andere in der Tabelle bzw. im Tabellenhintergrundbild, sondern außerhalb.
Kann ich irgendwie erreichen, dass die Buttons trotz "left" und "right" innerhalb der Tabelle sind?
@@Gerch2003:
nuqneH
ich weis nicht ob ich dich jetzt richtig verstanden habe
Du nicht weise?
aber Divs kann man nicht so einfach nebeneinander positionieren.
Doch, das kann man, indem man deren 'display'-Eigenschaft auf einen passenden Wert setzt: "inline", "inline-block".
- Möglichkeit:
Du weist den Divs das Attribut position:absolute; zu, das heist dass Sie absolut positioniert werden und du Ihnen mit left bzw. top eine genaue Position von oben bzw. von links zuweisen musst.
Man kann die Position auch durchaus von unten und recht aus angeben. Aber man sollte von absoluter Positionierung die Finger lassen, wenn man nicht genau weiß, was man tut.
- Möglichkeit.
Du weist den Divs das Attribut float:left; bzw. float:right; zu. Das ist ein kleiner css Hack.
Nein, 'float' ist kein Attribut und das ist kein CSS-Hack und das ist kein Deppenleerzeichen.
Eigentlich gedacht um Text um Bilder fliesen zu lassen
Nein, solch eine Beschränkung gab es nie. Und mit Kacheln hat das auch nichts zu tun.
Qapla'
Ich bin hier neuim Forum, da ich mit meinem Folgenden Problem nicht weiterkomme:
Ich habe eine Tabelle mit Hintergrund
Nicht in deinem Code. Der zeigt Blockelemente, die auch mit CSS nicht verändert wurden.
...in der ich Buttons einfügen will, die mit einer Mouseover Sprechblase belegt sind.
...
<div id="Icon" style="top:-15px;" > <a href="help" onmouseover="tooltip.show('<b>Hilfe</b><br>Unsere Hilfe'); Aktivieren();" onmouseout="tooltip.hide();">
Attributwerte muss man html-gerecht behandeln, auch bei Eventhandler-Attributen.
mfg Beat