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

CSS Problem

M

Mario1

Neues Mitglied
Hallo,
Mein Name ist Mario, bin neu im Forum und hoffe das ihr mir bei meinem Problem helfen könnt.
Ich bin ein Neuling wenns ums HTML-Coden geht und kenne mich dementsprechend noch nicht so gut aus damit.

Folgendes Problem:
Ich würde gerne den Text mit Rahmen links auf der Seite haben, während der nicht umrandete Teil mittig bleibt wie jz auch.

Jedoch schaffe ich es nicht den eingrahmten Teil auf die linke Seite zu tun.

screen-capture-1.jpg


Quellcode :
HTML: 
 <!doctype html><html><head>    
<meta charset="utf-8">    
<title> TEST INTERNETSEITE </title>  
<!--    <link rel="stylesheet" href="style.css"> -->        
<link rel="stylesheet" href="style2.css">    
</head>




<body>
<h1>&Uumlberschrift</h1>
<div id="article">    
<h2>LOREM IPSUM</h2>    
<p><em>        
"Lorem ipsum dolor sit amet        , consectetur adipisicing elit,         
sed do eiusmod tempor incididunt ut labore et         
dolore magna aliqua. Ut enim ad minim veniam,         
quis nostrud exercitation ullamco laboris nisi         
ut aliquip ex ea commodo consequat.         
Duis aute irure dolor in reprehenderit in voluptate         
velit esse cillum dolore eu fugiat nulla pariatur.        
 Excepteur sint occaecat cupidatat non proident,         
sunt in culpa qui officia deserunt mollit anim id est laborum." 
</em></p>
</div id="article">
<div id="def">    
<p><em>"Lorem ipsum dolor sit amet        
, consectetur adipisicing elit,         
sed do eiusmod tempor incididunt ut labore et         
dolore magna aliqua. Ut enim ad minim veniam,         
quis nostrud exercitation ullamco laboris nisi         
ut aliquip ex ea commodo consequat.         
Duis aute irure dolor in reprehenderit in voluptate         
velit esse cillum dolore eu fugiat nulla pariatur.         
Excepteur sint occaecat cupidatat non proident,         
sunt in culpa qui officia deserunt mollit anim id est laborum."         
</em></p>    
</div id="def">
<div id="ABC">    
<h2>NUR EIN TEST</h2>
</div id="ABC"></body>
<div id="BLOCK">    
<p><em>        
"Lorem ipsum dolor sit amet        
, consectetur adipisicing elit,         
sed do eiusmod tempor incididunt ut labore et         
dolore magna aliqua. Ut enim ad minim veniam,         
quis nostrud exercitation ullamco laboris nisi         
ut aliquip ex ea commodo consequat.         
Duis aute irure dolor in reprehenderit in voluptate        
 velit esse cillum dolore eu fugiat nulla pariatur.        
 Excepteur sint occaecat cupidatat non proident,         
sunt in culpa qui officia deserunt mollit anim id est laborum." 
</em></p>    
<p><em>"Lorem ipsum dolor sit amet        
, consectetur adipisicing elit,         
sed do eiusmod tempor incididunt ut labore et         
dolore magna aliqua. Ut enim ad minim veniam,         
quis nostrud exercitation ullamco laboris nisi         
ut aliquip ex ea commodo consequat.         
Duis aute irure dolor in reprehenderit in voluptate         
velit esse cillum dolore eu fugiat nulla pariatur.         
Excepteur sint occaecat cupidatat non proident,         
sunt in culpa qui officia deserunt mollit anim id est laborum."         
</em></p>                                                
<p><strong>NUR EIN TEST</strong></p>
</div id="BLOCK">
</html>


Code: 
h1 {    font size=50px;
    color:white;
    margin:auto;
    width:500px;
    }


div#article {
            color:white;
            margin:auto;
            width:500px;
            }
div#def {
    color:white;
    margin:auto;
    width:500px;
} 


div#ABC
        {
        color:white;
        margin:auto;    
        width:500px;
        }
        
                


body{
        padding-top:30px;
        background-color:black;
        width:500px;
        margin:auto;
        }
    




div#BLOCK {
            position:relativ;
            float:left;
            padding-left:10px;
            padding-right:10px;
            color:white;
            margin-left:0px;
            margin-right:2px;
            width:300px;
            border-width:2px;
            border-style:solid;
            border-color:white;
            }
 
Willkommen :)

Ich vermute, dass das Problem daran liegt, dass du den body platzmäßig begrenzt hast. Wenn du das entfernst, sollte das alles auch auf der linken Seite sein.

Und noch was: Wenn du Tags schließt, reicht z.B. </div>, du musst nicht nochmal die id dazuschreiben.
 
Danke für die schnellen Antworten, habe denn Tipp mit dem Body begrenzung wegtun befolgt erreiche jedoch noch nicht mein Ziel den eingerahmten Teil auf selber Höhe zu haben wie den Rest

screen-capture-2.jpg

Danke nochmal für die Tipps, das mit dem </div> ohne id wer ich noch ändern

Hoffe ihr könnt mir helfen, Danke :)
 
Das ist auch alles sehr unübersichtlich geschrieben. Ein paar Tipps für den Anfang:

- HTML-Code sollte entsprechend eingerückt werden, damit man auf Anhieb erkennt, was zusammengehört. Wenn du eine IDE wie Eclipse verwendest, dann erledigt die das auf Knopfdruck.

- CSS schreibt man in der Reihenfolge, wie die DIVs im HTML stehen und mit dem Body am Anfang. Anstatt div# kannst du hier auch nur # verwenden.

- installiere dir Firebug für den FF. Damit lassen sich im Browser temporäre Änderungen durchführen.

Ansonsten würde ich, mit Ausnahme des Bodys, überall das margin:auto löschen, und diesem dann eine feste Breite geben, die mindestens den gefloateten DIVs entspricht. Also 500px (article) + 300px (block) = 800px, sofern ich das hier richtig sehe.
 
Zeig vielleicht noch mal den aktuellen Code.

Gefloatete Elemente müssen im Quellcode vor nicht-gefloateten stehen. Ich nehme an, das ist das aktuelle Problem.
 
Habe den Quellcode einwenig geordnet

HTML: 
<!doctype html><html><head>    
<meta charset="utf-8">    
<title> TEST INTERNETSEITE </title>  
<!--    <link rel="stylesheet" href="style.css"> -->        
<link rel="stylesheet" href="style2.css">    
</head>




<body>
<h1>&Uumlberschrift</h1>
<div id="article">    
                  <h2>LOREM IPSUM</h2>    
                  <p><em> "Lorem ipsum dolor sit amet        
                                  , consectetur adipisicing elit,sed do eiusmod tempor 
                                    incididunt ut labore et dolore magna aliqua. Ut enim 
                                    ad minim veniam, quis nostrud exercitation ullamco 
                                    laboris nisi ut aliquip ex ea commodo consequat.         
                                    Duis aute irure dolor in reprehenderit in voluptate         
                                    velit esse cillum dolore eu fugiat nulla pariatur.         
                                    Excepteur sint occaecat cupidatat non proident,         
                                    sunt in culpa qui officia deserunt mollit anim id est laborum." 
                                    </em></p>
</div id="article">
<div id="def">    
                  <p><em>"Lorem ipsum dolor sit amet        
                                 , consectetur adipisicing elit, sed do 
                                   eiusmod tempor incididunt ut labore et         
                                   dolore magna aliqua. Ut enim ad minim veniam,         
                                   quis nostrud exercitation ullamco laboris nisi         
                                   ut aliquip ex ea commodo consequat.         
                                   Duis aute irure dolor in reprehenderit in voluptate         
                                   velit esse cillum dolore eu fugiat nulla pariatur.         
                                   Excepteur sint occaecat cupidatat non proident,        
                                   sunt in culpa qui officia deserunt mollit anim id est laborum."         
                                  </em></p>    
</div id="def">
<div id="ABC">    
             <h2>NUR EIN TEST</h2>
</div id="ABC">
</body>
<div id="BLOCK">    
               <p><em> "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                sed do eiusmod tempor incididunt ut labore et dolore magna 
                                aliqua. Ut enim ad minim veniam,quis nostrud exercitation 
                                ullamco laboris nisi ut aliquip ex ea commodo consequat.         
                                Duis aute irure dolor in reprehenderit in voluptate         
                                velit esse cillum dolore eu fugiat nulla pariatur.         
                                Excepteur sint occaecat cupidatat non proident,         
                                sunt in culpa qui officia deserunt mollit anim id est laborum." 
                               </em></p>    

                               <p><em> "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                                sed do eiusmod tempor incididunt ut labore et        
                                                dolore magna aliqua. Ut enim ad minim veniam,          
                                                quis nostrud exercitation ullamco laboris nisi         
                                                ut aliquip ex ea commodo consequat.         
                                                Duis aute irure dolor in reprehenderit in voluptate          
                                                velit esse cillum dolore eu fugiat nulla pariatur.         
                                                Excepteur sint occaecat cupidatat non proident,         
                                                sunt in culpa qui officia deserunt mollit anim id est laborum."         
                               </em></p>                                                
                 
                                                <p><strong>    
                                                 NUR EIN TEST 
                                                </strong></p>

</div id="BLOCK">
</html>

Code: 
body{        padding-top:30px;
        background-color:black;
        width:500px;
        }
    
h1 {
    font size=50px;
    color:white;
    margin-left:500px;
    width:500px;
    }


#article    {
            color:white;
            margin-left:500px;
            width:500px;
            margin-left:500px;
            }
            
#def {
    color:white;
    margin-left:500px;
    width:500px;
    } 


#ABC
        {
        color:white;
        margin-left:1px;    
        width:500px;
        }
        


#BLOCK {
            
            background-color:black;
            float:left;
            padding-left:10px;
            padding-right:10px;
            color:white;
            margin-left:0px;
            margin-right:2px;
            width:300px;
            border-width:2px;
            border-style:solid;
            border-color:white;
}
 
Zuletzt bearbeitet:
Mario1 schrieb:
Habe den Quellcode einwenig geordnet
Zum Vergrößern anklicken....

So etwas meinte ich mit einrücken:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Beispieltext</title>
    <style type="text/css">
        #block {
            width: 800px;
            margin: 0 auto;
        }
        #text {
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="block">
        <div id="text">
            <h1>Das ist ein Beispieltext</h1>
        </div>
    </div>
</body>
</html>

Dein Code dürfte schon deshalb nicht funktionieren, weil sich das DIV mit der ID Block außerhalb des Bodys befindet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben