• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit div layout(anfänger)

D

Don83

Mitglied
Hallo,
ich habe mich nach langem Hadern an CSS rangetraut.
Irgendwie bekomme ich das aber noch nicht so hin.
Habe ein layout an dem mich jetzt noch zwei Sachen stören. (Siehe Bild)
css_learning.png

Also 1.
Der Text läuft unten einfach aus der Umrandung. Ich hätte es lieber so dass WENN die maximalhöhe übertroffen wird, dann wird ein scrollbalken eingeblendet. So wie im Bild rot markiert. Verstehe noch nicht ganz wieso meine Höhenbeschränkung einfach ignoriert wird.
2.
Und an der zweiten Stelle habe ich solch ein hässliches "Artefakt" bei der Umrandung. Hätte es lieber das die Ränder ineinander übergehen.

Naja, vielleicht hat einer ein wenig Rat und ein paar Tips. Ich probiere schonmal weiter rum, aber komme da momentan auf keine schönen Ergebnisse :(.

Edit:
hoppla..habe den Quellcode vergessen :D
Code: 
<? header('content-type: text/html; charset=UTF-8'); ?>  
<?php include("db_con.inc") ?>
<html>
<head>
<title>Weltkarte</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style type="text/css">
</style>
</head>
<body>
<img  src="nav_icons/weltkarte_a.gif" >

        
    <div style="position:absolut; width:830px; height:780px;">
        <div style="position:absolut; width:455px; height:450px;float:left;border-style:ridge;border-color:#CCFF99; border-width:4px;">
            <img  src="weltkarte.gif" >
        </div>
        <div style="position:absolut;height:450px;border-style:ridge;border-color:#CCFF99; border-width:4px;">
            kuckuck
            <div>
                Übersicht:<br>
                Basis<br>
                Einsatzteam<br>
        Missionen/Syndikatsmissionen
        Mission1 "neu"<br> 
        Mission2<br>
        Mission3<br>
        Mission4<br>
        Mission5<br>
            </div>
            <div style="border-top-style:ridge;border-color:#CCFF99; border-width:4px;">
        -------------------------------------------------------<br>
        Ort: Portugal <br>
        Beschreibung: Blabla <br>
        Geographische Besonderheit: Wüste, Bergland<br>
        Typ: Transportmission<br>
        Schwierigkeitsgrad: leicht<br>
        Missionsziel1 ... <br>
        Sekundärziel ... <br>
        Einsatzdauer: 3 Stunden <br>
        Beobachtete Gegner: (??????) Scanner reicht nichkkkkkkkkkkkkkkkkkkkkkkkk<br>
        Beobachtete Gegner: (??????) Scanner reicht nic<br>
        Beobachtete Gegner: (??????) Scanner reicht n <br>
        MISSION STARTEN                       MISSION A<br>
        MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
MISSION STARTEN                       MISSION A<br>
            </div>
        </div>
    </div>

</body>
</html>
 
hi
für scrollbalken musst du nur <div style="overflow-y:auto;height:300px"> benutzen
wenn dann zu hoch wird, werden scrollbalken erstellt (nur vertikal)
beim anderen würde ich mal sagen, dass da was mit margin-left erledigt werden könnte...
einfach margin-left erhöhen

ich würde aber das komplette mit einer einfachen tabelle machen... div is bei sowas meiner meinung nach zu ungenau und zu schwer (musst dann noch schauen, ob das bei allen browsern gleich aussieht... bei tabellen wär das passend)

cya
 
Okay dank dir schonmal. Der overflow Befehl funktioniert :-).
Naja ich arbeite sonst auch mit Tabellen wollte aber mal ein wenig mit div rumbasteln,aber hier ist eine Tabelle wohl wirklich sinnvoller.
 
Wenn es sich um tabellarische Daten handelt, ist eine Tabelle immer die richtige Wahl. Wenn es aber um das Layout geht, machst du das mit CSS. Layout hat mit HTML nichts zu tun. HTML ist nur für die Semantik deiner Seite zuständig. Welches Tag du also wählst, hängt immer nur davon ab, welche Bedeutung dein Inhalt haben soll.

Das Tag <div> dient nur der Gruppierung mehrerer Elemente, mit ihm macht man genau so wenig Layout wie mit jedem anderen Tag.
 
Ja gut schon klar.
Allerdings verwendet man ja zum CSS layout gestalten in der Regel div, oder nicht?
Naja hab jetzt auf jeden Fall mal das Layout mit div+CSS angepasst, also nicht mit tabellen. Sieht jetzt eigentlich so aus wie ichs haben wollte. Obs gut aus sieht oder nicht kann ich natürlich subjektiv schlecht beurteilen :razz:.
Bildschirmfoto.png
 
Don83 schrieb:
Allerdings verwendet man ja zum CSS layout gestalten in der Regel div, oder nicht?
Zum Vergrößern anklicken....
Nein, macht man nicht.

Ein Beispiel:
HTML: 
<h1>Headline</h1>
<ul id="navitagion">
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p>
  <img src="" alt="" title="" />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
Eine ganz einfache Seite gänzlich ohne div und ich kann jedes Element formatieren.
 
Das mit der Ungeordneten Liste macht man halt meistens bei Navigationen usw. Aber wenn man mehrere Spalten usw. hat, verwendet man schon meistens div.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben