kostenloser Webspace werbefrei: lima-city


CSS Problem 2 Boxen nebeneinander

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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
  4. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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
  5. 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.
  6. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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
  7. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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
  8. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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
  9. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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>
  10. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  11. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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
  12. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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?
  13. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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.
    :angel: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
  14. 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ß.
  15. 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...
  16. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  17. 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
  18. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
  19. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    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>&nbsp;&nbsp;
    <a href="URL" target="_blank">Impressum</a>
    <div>

    Das das so richtig?


    Beitrag zuletzt geändert: 26.4.2014 21:59:20 von skateen
  20. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    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
  21. Autor dieses Themas

    skateen

    skateen hat kostenlosen Webspace.

    Ok Dankeschön...

    Close

  22. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!