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

Hintergrund am oberen Rand positionieren?

N

narsaa

Neues Mitglied
Hallo Leute !
Bin gerade dabei mir ein wenig CSS anzueignen und bin direkt auf ein Problem gestoßen !
Mein Hintergrundbild was ich wie folgt in die CSS datei eingebunden habe :

body {
margin: 0;
font-family: Verdana,Arial,sans-serif;
font-size:15px;
background-color: #ffffff;
overflow:auto; }


#seite{
background-image: url(hg.jpg);
background-repeat: no-repeat;
width: 1024px;
height:729px;
margin: auto;

wird nicht direkt am oben Rand des Browsers positioniert sondern eine cm darunter. Habe schon versucht das Problem mit padding:5px; zu lösen. Verändere ich da allerdings den Wert verschieben sich meine ganzen divs ( mit margin positioniert und mit padding den innenabstand) ..wie kann das sein das der hintergrund nicht direkt am oberen rand angezeigt wird und das wenn ich bei padding was verändere meine ganzen divs mit verändert werden ?
ist da was im code falsch ? ich bin schon den halben tag am grübeln aber komm einfach nicht weiter !

liebe grüße =)
 
Das hängt dann vermutlich auch von deinem übrigen HTML- und CSS-Code ab. Deshalb am besten einen Link zur Problemseite.
Mit Padding erhöhst du ja den Abstand.
Du kannst es mal mit einem Abstands-Reset versuchen; hängt möglicherweise auch an einer verwendeten Überschrift h.
Unterschiedliche Abstände in verschiedenen Browsern

(position: absolute wie von Carragos empfohlen ist vermutlich die schlechteste und ungeeignetste, da überhaupt keine Lösung)
 
prm schrieb:
Das hängt dann vermutlich auch von deinem übrigen HTML- und CSS-Code ab. Deshalb am besten einen Link zur Problemseite.
Mit Padding erhöhst du ja den Abstand.
Du kannst es mal mit einem Abstands-Reset versuchen; hängt möglicherweise auch an einer verwendeten Überschrift h.
Unterschiedliche Abstände in verschiedenen Browsern

(position: absolute wie von Carragos empfohlen ist vermutlich die schlechteste und ungeeignetste, da überhaupt keine Lösung)
Zum Vergrößern anklicken....


ok also so sieht meine css datei aus


HTML: 
body {
margin: 0; 
font-family: Verdana,Arial,sans-serif; 
font-size:15px;
background-color: #ffffff;
overflow:auto; }


#seite{
background-image: url(hg.jpg);
background-repeat: no-repeat;
width: 1024px; 
height:729px;
margin: auto;   
   }
  
    #eins,#zwei,#sieben {
    background-image: url(lk.jpg);
     background-repeat: no-repeat;
     width:304px;
     height:274px;
     float:left;
    margin: 0px;
    padding: 10px; 
    }
    
    #drei,#vier
    background-image: url(lk2.jpg);
     background-repeat: no-repeat;
     width:304px;
     height:274px;
     float:left;
     margin: 0px;
    padding: 10px; 
}

    
    #fuenf,#sechs{
    background-image: url(lk3.jpg);
     background-repeat: no-repeat;
     width:307px;
      float:right;
      height:274px;
margin:0px;
    padding: 10px; 
    }
mit den margins hab ich auch noch meine problem da die sich komischerweiße auch noch verschieben obwohl sie ja teilweise die gleiche zuweisung besitzen ( z.B #eins,#zwei)
 
Zuletzt bearbeitet:
Falls dir jemand helfen soll, dann poste bitte einen Link zu deiner Seite.
Zur Beurteilung benötigt man noch den HTML-Code und den Zusammenhang mit den per CSS eingebundenen Hintergrundgrafiken.
 
die seite ist noch nicht veröffentlicht vondaher erst mal nur der code

HTML: 
<head>
    <title>index seite</title>
    <link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="seite">
    <div id="eins">
            Händelserna i den föregående boken har visat på förekomsten av 
            en hemlig grupp inom Säpo som bildades under kalla kriget. 
            Denna grupp står ytterst bakom de rättsövergrepp som Sallender har 
            utsatts för sedan 12-årsåldern för att 
            skydda den sovjetiske storspionen Alexander.
        </div>
    
    </div>
<div id="zwei">
            Romanen publicerades i juni 2006. Gilbert Kontaktas av 
            frilansjournalisten Svensson som säger sig ha kartlagt den 
            svenska handeln, ett ämne som är intressant för Alberston 
            tidskrift för grävande journalistik. Lisbeth Salander tar itu 
            med advokat Regard som är hennes förmyndare.
        </div>
    </div>
    <div id="navi">
        <ul>
            <a href="2.html">vidare</a>
        
        </ul>
    </div>
</div>
</body>
</html>
 
Der Code ist nicht vollständig (DOCTYPE nicht ersichtlich) und enthält zwei schließende Div-Elemente mehr als öffnende.

Wenn ich tippen sollte: Irgendetwas in #seite erzeugt per margin-top den Abstand. Gib mal #seite ein padding.
 
das mit dem DOCTYPE ist mir nun auch aufgefallen :)
habe diesen nun eingefügt
Code: 
<?xml version="1.0" encoding="utf-8"?>
<!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">

danke für den tipp mit dem padding. das hat auch soweit so gut geklappt, der Hintergrund ist jetzt am Rand allerdings verschieben sich nun meine divs. Klicke ich auf Seite 2 sind genau die divs, die gleich ausgerichtet sind

Code: 
#eins,#zwei,#sieben{
    background-image: url(lk.jpg);
     background-repeat: no-repeat;
     width:304px;
     height:274px;
     float:left;
	margin: 0px;
    padding: 10px; 
    }

an unterschiedlichen positionen. Auf seite eins werden die divs #eins & #zwei dargestellt. Die beiden sind soweit auch richtig positioniert. Klicke ich dann auf Seite 2 wo der div #sieben dargestellt wird ( gleiche positionierung ) wird dieser in einer anderen position angezeigt .. :/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben