CSS Problem 2 Boxen nebeneinander
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anleitung
auto
automatisch passieren
bereich
boxen
browser
code
container
dank
element
folgen
http
layout
paar
problem
tabelle
text
trick
umbruch
url
-
Hey, ich hab ein Problem:
http://skateen.lima-city.de/Hauptseite/
Ich bekomme auf meiner Seite, die Boxen nicht richtig hin.
So habe ich mir das vorgestellt:
http://skateen.lima-city.de/Hauptseite/hppland.png
Kann mir jemand helfen:
Ich hab vieles versucht, jedoch ging nichts.
Gruß LeyUp -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
http://de.selfhtml.org/css/layouts/mehrspaltige.htm
Einfach mal der Anleitung da folgen ...
Beitrag zuletzt geändert: 21.4.2014 0:53:31 von sonok -
sonok schrieb:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm
Einfach mal der Anleitung da folgen ...
Danke, aber so richtig weiter bin ich auch nicht gekommen:
http://www.skateen.lima-city.de/Hauptseite/
Ich wüsste jetzt aber auch nicht, wie ich das jetzt machen soll.
Gruß LeyUp -
Bereinige erstmal dein HTML. Da sind noch Tags von irgendeiner Tabelle drin, die da bestimmt nicht rein gehören.
Auf http://www.html-seminar.de/komplette-website-erstellen.htm findest du ein paar Beispiele, wie du es umsetzen kannst. -
sonok schrieb:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm
Einfach mal der Anleitung da folgen ...
Ich habe jetzt 2 Boxen in der Seite, leider übereinander und der Text ragt aus dieser Box heraus.
http://skateen.lima-city.de/Hauptseite/
Wie soll der CSS Code aussehen, damit beide Boxen nebeneinander sind und das der Text in den Boxen bleibt?
Gruß LeyUp -
Gelb:
Das float-right rauswerfen
Mit overflow: auto; wird auch horizontal gescrollt, allerdings ist der Versuchstext suboptimal, besser Du versuchst es vorher mit ein paar normalen Wörtern statt einem Megawort... dann sollte der Umbruch automatisch passieren
Gelb / Grün:
Das width der grünen Box auf den Wert des margin-left der gelben Box setzen. Aktuell ist der grüne Wert höher als der Gelbe, das ist net so gut glaub ich.
Beitrag zuletzt geändert: 24.4.2014 0:43:26 von sonok -
sonok schrieb:
Gelb:
Das float-right rauswerfen
Mit overflow: auto; wird auch horizontal gescrollt, allerdings ist der Versuchstext suboptimal, besser Du versuchst es vorher mit ein paar normalen Wörtern statt einem Megawort... dann sollte der Umbruch automatisch passieren
Gelb / Grün:
Das width der grünen Box auf den Wert des margin-left der gelben Box setzen. Aktuell ist der grüne Wert höher als der Gelbe, das ist net so gut glaub ich.
http://skateen.lima-city.de/Hauptseite/
Danke
Sieht jetzt etwas besser aus, aber so richtig nebeneinander sind die halt nicht.
Gruß LeyUp -
Grüne Box:
float: left; wieder einfügen :D
Das hast Du da ausversehen herausgenommen.
Abgesehen davon - der komplette Style-Block gehört meines Erachtens in den Head-Bereich-
<head>
<style>
[...]
</style>
</head>
<body>
[...]
</body> -
Du hast eine Reihe von Hinweisen aus vorherigen Beiträgen nicht beachtet.
1. Als Versuchstext wirklichen Text verwenden, nicht eine Aneinanderreihung von Buchstaben ohne Leerzeichen dazwischen. Wenn es keine Leerzeichen gibt findet kein Zeilenumbruch statt.
2. Es gibt nach wie vor Teile von altem Code aus einer Tabelle bei dir:
</td><td>
und
</td>
3. Am Ende deines HTML-Codes steht
<html>
Es muss aber
</html>
sein.
Bevor man eine Webseite mit CSS styled sollte man sicherstellen, dass der eigentliche HTML-Code korrekt ist. das kann man mit
http://validator.w3.org
tun. Zurzeit zeigt dieser Validator für deine Seite 9 Fehler. -
sonok schrieb:
Grüne Box:
float: left; wieder einfügen :D
Das hast Du da ausversehen herausgenommen.
Abgesehen davon - der komplette Style-Block gehört meines Erachtens in den Head-Bereich-
<head>
<style>
[...]
</style>
</head>
<body>
[...]
</body>
Danke, hab es wieder verändert. Die Boxen sind jetzt wie gewollt nebeneinander, aber das Text Problem ist jedoch immer noch da.http://skateen.lima-city.de/Hauptseite/
mein-wunschname schrieb:
Du hast eine Reihe von Hinweisen aus vorherigen Beiträgen nicht beachtet.
1. Als Versuchstext wirklichen Text verwenden, nicht eine Aneinanderreihung von Buchstaben ohne Leerzeichen dazwischen. Wenn es keine Leerzeichen gibt findet kein Zeilenumbruch statt.
2. Es gibt nach wie vor Teile von altem Code aus einer Tabelle bei dir:
</td><td>
und
</td>
3. Am Ende deines HTML-Codes steht
<html>
Es muss aber
</html>
sein.
Bevor man eine Webseite mit CSS styled sollte man sicherstellen, dass der eigentliche HTML-Code korrekt ist. das kann man mit
http://validator.w3.org
tun. Zurzeit zeigt dieser Validator für deine Seite 9 Fehler.
Achja, das <td> und das <html> habe ich ja gar nicht gesehen. Hab es auch verändert
Gruß LeyUp -
skateen schrieb:
Danke, hab es wieder verändert. Die Boxen sind jetzt wie gewollt nebeneinander, aber das Text Problem ist jedoch immer noch da.http://skateen.lima-city.de/Hauptseite/
...
Gruß LeyUp
Was meinst du mit Textproblem?
Warum beachtest du nicht die gegebenen Hinweise? -
sonok schrieb:
Gelb:
Das float-right rauswerfen
Mit overflow: auto; wird auch horizontal gescrollt, allerdings ist der Versuchstext suboptimal, besser Du versuchst es vorher mit ein paar normalen Wörtern statt einem Megawort... dann sollte der Umbruch automatisch passieren
Ach das ist damit gemeint.
Danke jetzt Funktioniert es Problemlos.
Die Boxen müssen gleich groß sein.
mit height: 100%; geht das nicht.
Kann mir da jemand helfen?
Gruß LeyUp
Beitrag zuletzt geändert: 24.4.2014 22:46:06 von skateen -
Da hilft nur ein Trick mit Hilfe eines Hintergrundbildes.
Das Hintergrundbild ist so breit, wie beide Boxen zusammen und ist 1-2px hoch. Um deine beiden div Container legst du einen erneuten div Container, wo dann dieses Hintergrundbild angezeigt wird.
So sind dann visuell beide Spalten gleich groß. -
Ich glaube, ich habe die Lösung deines Problems ergoogled... ein Tutorial zur Erstellung eines einfachen 2-spaltigen Layout mit Header und Footer...
Du musst nur die Farben anpassen, dann sieht es schon fast so aus wie dein jetziger Versuch... -
Zum Problem der gleich großen, vor allem gleich hohen div-Boxen gibt es mehrere Ansätze, den mit der Grafik hat @all-in1 grob beschrieben.
Daneben gibt es eine reine CSS-Lösung, die -tewas trickreich- hier
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
beschrieben wird.
Daneben gibt es noch diverse Lösungen mit JavaScript. Einige davon benötigen jQuery. Ein JavaScript ohne jQuery kann so aussehen:
addLoadListener(equalHeight); function equalHeight() { // in den beiden folgenden Zeilen die ID der beiden div-Boxen eintragen var myLeftColumn = document.getElementById("div1"); var myRightColumn = document.getElementById("div2"); var myLeftHeight = myLeftColumn.offsetHeight; var myRightHeight = myRightColumn.offsetHeight; var myLeftBorderTopPixels = retrieveComputedStyle(myLeftColumn, "borderTopWidth"); var myLeftBorderBottomPixels = retrieveComputedStyle(myLeftColumn, "borderBottomWidth"); var myLeftPaddingTopPixels = retrieveComputedStyle(myLeftColumn, "paddingTop"); var myLeftPaddingBottomPixels = retrieveComputedStyle(myLeftColumn, "paddingBottom"); var myRightBorderTopPixels = retrieveComputedStyle(myRightColumn, "borderTopWidth"); var myRightBorderBottomPixels = retrieveComputedStyle(myRightColumn, "borderBottomWidth"); var myRightPaddingTopPixels = retrieveComputedStyle(myRightColumn, "paddingTop"); var myRightPaddingBottomPixels = retrieveComputedStyle(myRightColumn, "paddingBottom"); var myLeftBorderNumber = Number(myLeftBorderTopPixels.replace("px", "")) + Number(myLeftBorderBottomPixels.replace("px", "")); var myLeftPaddingNumber = Number(myLeftPaddingTopPixels.replace("px", "")) + Number(myLeftPaddingBottomPixels.replace("px", "")); var myLeftExtras = myLeftBorderNumber + myLeftPaddingNumber; var myRightBorderNumber = Number(myRightBorderTopPixels.replace("px", "")) + Number(myRightBorderBottomPixels.replace("px", "")); var myRightPaddingNumber = Number(myRightPaddingTopPixels.replace("px", "")) + Number(myRightPaddingBottomPixels.replace("px", "")); var myRightExtras = myRightBorderNumber + myRightPaddingNumber; if (myLeftHeight > myRightHeight) { myRightColumn.style.height = (myLeftHeight - myRightExtras) + "px"; } else { myLeftColumn.style.height = (myRightHeight - myLeftExtras) + "px"; } } function retrieveComputedStyle(element, styleProperty) { var computedStyle = null; if (typeof element.currentStyle != "undefined") { computedStyle = element.currentStyle; } else { computedStyle = document.defaultView.getComputedStyle(element, null); } return computedStyle[styleProperty]; } function addLoadListener(fn) { if (typeof window.addEventListener != 'undefined') { window.addEventListener('load', fn, false); } else if (typeof document.addEventListener != 'undefined') { document.addEventListener('load', fn, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onload', fn); } else { var oldfn = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldfn(); fn(); }; } } }
Ich habe dieses JavaScript mal auf dieser Website
http://template-hamster.host4free.de/
entdeckt, wo es auch immer noch eingebaut ist. Das Script hat aber keinen Urhebervermerk, daher habe ich es hier schon mal gepostet.
-
Du kannst die Höhe deiner Boxen durch den CSS-Befehl Flex automatisch an die Größe deiner größten Box angleichen lassen, wenn du ältere Browser unterstützen willst, musst du zusätzlich noch eine JS-Lösung die bei bestimmten Browsern einsetzt einbauen.
Hier ist eine sehr ausführliche Anleitung in englisch, eine gute deutsche Anleitung habe ich bisher noch nicht gesehen. Flex funktioniert auch fabelhaft, solange du auf Browsern bist die dies unterstützen...
Unterstützende Browser:
Firefox seit Version 20
Chrome seit Version 25
Internet Explorer seit Version 10
Opera seit Version 12
Safari unterstützt flex bisher noch nicht.
Anleitung: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Beitrag zuletzt geändert: 25.4.2014 8:49:20 von vctb -
vctb schrieb:
...
Safari unterstützt flex bisher noch nicht.
Anleitung: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Gemäß
http://caniuse.com/#feat=flexbox
eigentlich doch, aber mit Vendor-Präfix -
Danke, ich hab es doch hinbekommen.
Aber eine Frage?
<style type="text/css"> a.Impress:link { text-decoration:none;} text-underline: none; style="font-family: color: #FFFFFF; } a.Impress:visited { text-decoration:none;} text-underline: none; style="font-family: color: #FFFFFF; } a.Impress:hover { color: #FF0000; background: #FF4000; } </style> <div class="Impress"> <a href="URL" target="_blank">Kontakt</a> <a href="URL" target="_blank">Impressum</a> <div>
Das das so richtig?
Beitrag zuletzt geändert: 26.4.2014 21:59:20 von skateen -
skateen schrieb:
[...]
Das das so richtig?
Nö.
Während Du im html-bereich dem div die Klasse impress zuweist, versuchst Du im style-bereich a-tags vom Typ impress zu manipuliren.
Entweder du machst <a class="impress"> im html-Berreich oder du machst div.impress im style-Bereich - je nachdem was wo wie manipuliert werden soll.
edit:
Und die geschweiften Klammern mußt Du mal überprüfen, da machst Du mehr zu als auf.
Beitrag zuletzt geändert: 27.4.2014 3:25:09 von sonok -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
