Felder Übereinander legen.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
beschreiben
bild
code
dach
feld
frage
gespielt code
hilfe
http
luft
mitte
nachtrag
paar
position
problem
punkt
querbalken
rote leiste
sagen
-
ho ;)
ich habe atm wieder etwas luft zu atmen... will ich gleich nützen um euch eine frage zu stellen :P
und zwar würde ich gerne m.h. von CSS (div) ein paar felder übereinander legen...
das ist ja grundsätzlich nicht so schwer, wenn man den Position:abolute befehl kennt XD
jetzt aber meine persönliche herausforderung: das ganze in einem Table zu machen...
sprich ich habe nen Table - sagen wir 400 * 400 groß
und jetzt will ich da oben ne rote leiste rein machen (also ein div feld mit rotem hintergrund 10 * 400
unten die gleiche leiste auch 10 * 400
und rechts auch ne rote leiste 10 * 400
und dann noch eine leiste, die von oben nach unten die mitte durchkreuzt (damit nicht alles am rand liegt :P
ergibt ein rotes _|_] (die oberen striche bekomm ich so nicht hin XD ^^)
also ich habe mich da ein bisschen gespielt...
... <table border=\"1\" style=\"width:400px; height: 400px;\"> <tr> <td> <div style=\"padding-left: 0px;padding-top: 0px;\">Name</div> ...
das ist jetzt einmal ein div, in dem Name drinnen steht... späte soll dann nichts mehr drinnen stehen :P (und es hat auch noch keine hintergrund farbe, aber egal)
mein problem: wie bekomme ich das div feld so groß hin, wie ich es haben will, und gleichzeitig an die position an die ich es haben will
das oben mit den rändern war nur ein bsp... ich will das dann natürlich ganz anders anordnen :P - aber die idee die dahinter steckt bräcuhte ich :)
hoffe, ich habe mich deutlcih ausgedrückt :P
thx schon mal im vorraus :)
Sincer
PS: pls. keine fragen über den sinn der sache - Sincer denkt sich schon was dabei und will einfach herumprobieren ;)
Das Ergebnis wird natürlich präsentiert, falls es gelingt, und es irgend jem. interessiert ;P -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hi sincer,
ich bin zwar kein div experte aber funktioniert
style=\"width:400px; height: 400px;\"
nicht auch bei divs?
ich glaube schon, und damit hättest du gleich mal die größe.
soweit ich weis gibt es negative positionsangaben (zumindest bilde ich mir ein sie mal verwendet zu haben).
wenn das stimmt dann verwendet einfach negative zahlen um se überlappen zu lassen.
hoffe das ich dir ein klein wenig helfen konnte
Nachtrag:
<table border=\"0\" style=\"width:400px; height: 400px;\"> <tr> <td> <div style=\"padding-left: 0px;padding-top: 0px; width:400px; height:10px; background-color: FF0000\"></div> <div style=\"padding-left: 0px; padding-top: 0px; position:relative; top:-10px; width:10px; height:400px; background-color: 00FF00\"></div> <div style=\"padding-left: 0px; padding-top: 0px; position:relative; top:-410px; left:390px; width:10px; height:400px; background-color: 00FF00\"></div> <div style=\"padding-left: 0px; padding-top: 0px; position:relative; top:-420; left:0px; width:400px; height:10px; background-color: FF0000\"></div> <div style=\"padding-left: 0px; padding-top: 0px; position:relative; top:-630; left:0px; width:400px; height:10px; background-color: FF0000\"></div> </td> </tr> </table>
Ob jeder Browser diesen Code richtig interpretieren kann kann ich dir nicht sagen.
Weiters ergibt das ein rechteckek das in der mitte horizontal nochmal \"durchgestrichen\" wird (entspricht nicht ganz deiner \"angabe\")
Beitrag geändert: 19.5.2008 17:24:32 von beliar -
also ganz verständlich hast du dich noch nicht ausgedrückt, ein bild als skizze wär schön
-
ho ;)
grundsätzlich ja ;)
erster punkt ist abgehakt von der liste: ich weiß jetzt, wie man die größe der felder macht....
mit der positionierung, und übereinsanderlegung habe ich allerdings noch ein paar probs...
<body> <table width=\"400\" height=\"400\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td height=\"83\"> <div style=\"padding-left: 0px; padding-top: 0px; width:10px; height: 400px; position:absolute; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;\">Sincer</div> <div style=\"padding-left: 0px; padding-top: 0px; width:400px; height: 10px; position:absolute; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;\">Name</div> </td> </tr> </table> </body>
also um sich das mal vorstellen zu können:
man sieht einen table
und dann kommt quer über dem table ein div feld, mitten durch die mitte quer durch
und aus diesem div geht ein weiteres hervor, das dann runter geht...
ist schwer zu beschreiben...
ich habs mal eben hochgeladen...
http://sincer.lima-city.de/div/
also ka. was ich da falsch mache...
eig. sollte das jetzt mal so ein ding werden, das wie ein dach mit wand aussieht... also eig. nur 200 px nach oben :P
ich will das ganze in dem 400*400 table haben...
woran liegt die verschiebung? wie verhindere ich das?
thx
Sincer
//EDIT:
also habe jetzt beide exemplare hochgeladen :P
meines:
http://sincer.lima-city.de/div/index.html
und das von beliar:
http://sincer.lima-city.de/div/div2.html
(wobei seines besser ausschaut XD - der table ist allerdings viel zu groß, und ich habe ka, warum :( )
(und wie ich gerade sehe, werden bei deinem modell die querbalken in FF nicht angezeigt - ka, warum oO)
weiterhin thx für die hilfe :)
Beitrag geändert: 19.5.2008 17:48:19 von sincer -
gib mal dem td noch \"valign = top\" das sollte das problem lösen
Nachtrag: bei meiner Version werden die querbalken auch nicht angezeigt (win xp FF2)
ich hab das erstellt unter mac FF2 dort hat es gepasst
Beitrag geändert: 19.5.2008 21:44:03 von beliar -
ho ;)
thx fürs reagieren, und für den tipp :)
die zeile schaut jetzt so aus
<td height=\"400\" bgcolor=\"#00FF00\" valign=\"top\">
aber geändert hat sich nichts :(
hast du noch einen vorschlag?
lg && thx
Sincer -
es ändert sich sehr wohl was (hab das lokal getestet) wenn du allerdings den quelltext anschaust von der seite wirst du sehen das noch immer <td height=\"83\"> steht
-
hey, sauber :)
hat funktioniert XD
vielen vielen dank für die hilfe ;)
wenn du willst, melde ich mich bei dir, wenn ich mein \"projekt\" fertig habe :P
lg
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
