Antworten auf deine Fragen:
Neues Thema erstellen

CSS Boxenproblem

V

vince23

Nicht mehr ganz neu hier

Servus,
ich habe ein kleines CSS Boxenproblem.
ich habe mir eine kleine Website gebastelt:
Banner oben, dadrunter horizontale Navi, Content und
Footer. Ziemlicher Standard. Das ganze wird von einem
container zusammengehalten. So jetzt zum eigentlichen Problem:
Immer wenn ich irgendwo einen Paragraphen (p) einfüge,
macht er mir Abstände zwischen die einzelnen Div-Boxen.
Weiß einer wie ich das beheben kann ?

Vielen Dank schonmal,

vince


Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seite</title>
<link rel="stylesheet" href="css/style.css" type="text/css" title="default"></link>

<link rel="shortcut icon" href="http://www.psd-tutorials.de/modules/Forum/images/favicon.ico"></link>
</head>

<body>

<div id="container" class="container">
  <div id ="header" class="header"></div>
<div id="navi" class="navi">
  <p><a href="index.html">Home</a> |
     <a href="about.html"> About </a>|
     <a href="gallery.html">Test |</a>
      <a href="contact.html">Contact</a></p>
</div>
<div id="content">
   
   <p><strong>Herzlich Willkommen </strong>
     
   </p>
   <hr />
  



    <p><img src="http://www.psd-tutorials.de/modules/Forum/images/lights.jpg" alt="lights" width="462" height="126" />    </p>
  <p>  Ein kleiner Bildtext......
    </p>
    <ul><li> punkt1 </li>
    
    
   <li> punkt2</li>
    
    
   <li> punkt3 </li>
    
    </ul>
    
     
    </p>
      </p>
</div>
<div id="footer" class="footertxt">copyright </div>
</div>
</body>
</html>

Code: 
#content li {
	margin-left: 94px;
}
p {
	margin-left: 94px;
	margin-right: 34px;
}
body {
	background-color: #eeeeee;
	background-image: url(../images/back.jpg);
	background-repeat: repeat;
}


#container {
	height: 673px;
	width: 600px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 14px;
	margin: 0 auto;
}


#header {
	width:600px;
	height:124px;
	background-image: url(../images/banner.png);
	background-repeat: no-repeat;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
#navi {
	background-color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	width: 600px;
	height: 25px;
}

#navi #tbl1 {
}

#footer {
	background-color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	text-align: right;
	height: 24px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	width: 588px;
}
#content {
	background-color: #CCCCCC;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-bottom-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	border-left-style: solid;
	width: 600px;
	height: 500px;
}


.footertxt {
	text-align: right;
	padding-right: 7px;
	padding-top: 4px;
}



a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	color: #999999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

.menu:link {
	color:#666666;
	text-decoration:none;
	margin-left: 94px;
}
.menu:visited {
	color:#666666;
	text-decoration:none;
	margin-left: 94px;
}
.menu:active {color:#666666; text-decoration:none}

.navi:link {
	color:none;
	text-decoration:none;
	background-color: #FFFFFF;
}
.navi:visited {
	color:none;
	text-decoration:none;
	background-color: #FFFFFF;
}
.navi:active {
	color:none;
	text-decoration:none;
	background-color: #FFFFFF;
}

.navi:hover {
background-color:#CCCCCC;
text-decoration:none;



.headline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 32px;
	color: #FFFFFF;
	margin-left: 7px;
	margin-top: 13px;
}
.headline2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 36px;
	color: #999999;
	font-weight: bold;
	margin-left: 12px;
}
.catgry {
	color: #666666;
	margin-left: 95px;
	background-color: #CCCCCC;
}
.catgry2 {
	background-color: #6B6D6B;
	color: #FFFFFF;
	margin-left: 95px;
}


.pic {
	padding-left: 21px;
	padding-top: 34px;
	margin-left: 4px;
	float: left;
	padding-right: 90px;
}



h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #484848;
	font-weight: bold;
	margin-left: 94px;
}
.fliesstxt {
	margin-left: 94px;
	padding-right: 18px;
}
h2 {
	font-size: 14px;
	color: #666666;
	margin-left: 94px;
}
hr {
	height: 1px;
}

.img_right {
	padding-top: 11px;
	margin-left: 478px;
}
.undertxt {
	font-size: 11px;
	padding-left: 267px;
}
.foot_img {
	float: left;
	margin-left: 3px;
	margin-bottom: 3px;
}
.undername {
	font-size: 12px;
}
#textbox {
	background-color: #333333;
	width: 114px;
	margin-left: 474px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-left: 12px;
	margin-top: 14px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
	word-spacing: 8px;
}
.catgry3 {
	color: #FFFFFF;
	margin-left: 95px;
	background-color: #B5B5B5;
}
.describe {
	color: #319CBB;
	margin-left: 5px;
	font-size: 12px;
}
.form {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
.ueber {
	font-size: 14px;
	color: #666666;
	font-weight: bold;
}
.img_left {
	margin-left: 94px;
	padding-top: 23px;
}
.content_img {
	margin-left: 94px;
}
#styleswitcher {
	float: right;
}
 
Zuletzt bearbeitet:

H

Herr_D

offline

AW: CSS Boxenproblem

Versuche mal das Universalattribut ganz oben im CSS

Code: 
* {
margin:0; padding:0; }



Wer baut dir eigentlich die p's ein?


Das ist bisschen komisch... moment



Du musst dir angewöhnen, genauer zu schreiben...

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seite</title>
<link rel="stylesheet" href="css/style.css" type="text/css" title="default" />
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<div id="container" class="container">
        <div id ="header" class="header"></div>
        <div id="navi" class="navi">
          <p><a href="index.html">Home</a> | <a href="about.html"> About </a> | <a href="gallery.html">Test </a> | <a href="contact.html">Contact</a></p></div>
        <div id="content">
           <p><strong>Herzlich Willkommen </strong></p>
           <hr />
           <p><img src="http://www.psd-tutorials.de/modules/Forum/images/lights.jpg" alt="lights" width="462" height="126" />    </p>
           <p>  Ein kleiner Bildtext......</p>
            <ul>
                <li> punkt1 </li>
                <li> punkt2</li>
                <li> punkt3 </li>
           </ul>
        </div>
        <div id="footer" class="footertxt">copyright </div>
</div>
</body>
</html>



Die Navi würd ich als horizontale Liste machen (Ansichtssache ;))
 
Zuletzt bearbeitet:
V

vince23

Nicht mehr ganz neu hier

AW: CSS Boxenproblem

jopp, hat prima gefunzt , danke !!
die p's bau ich mir selber ein :)

Was ist komisch ?

Jau das wollte ich eben noch machen.
Jetzt versuche ich noch eine Klasse zu erstellen,
um den Text zu verkleinern - in Dreamweaver klappts.
Im Browser wieder net. Das regt mich wieder auf.
 
Zuletzt bearbeitet:
V

vince23

Nicht mehr ganz neu hier

AW: CSS Boxenproblem

jau bin ich ..... ;)

sorry , dass ich wieder rumnerven muss aber ich habe wieder ein Problem:

wenn ich das h2-Tag formatiere ( andere Farbe und Größe ) tut sich im Browser
nix , im Dreamweaver schon....wie kann das ???
 
V

vince23

Nicht mehr ganz neu hier

AW: CSS Boxenproblem

Code: 
<div id="content">
   
   <h2>Herzlich Willkommen </h2>
   
   <hr />

und

Code: 
h2 {
	font-size: 16px;
	color: #584B63;
}


Hab nur die oben erwähnte Überschrift geändert.
Am refreshen liegts nicht, ich lade die Seite regelmäßig neu.
Aber das Problem habe ich bei meheren Elementen heute:
einige Klassen / Divs funktionieren einfache nicht im Browser,
obwohl sie bis dato im Dreamweaver und auch ansonsten eigentlich in Ordnung waren.

Hast du eine Idee ?
 
Clark

Clark

Noch nicht viel geschrieben

AW: CSS Boxenproblem

Hallo vince23!

Mal ´ne Frage. Wenn Du ein „div id” bennenst, warum klassifizierst Du es noch zusätzlich mit „class”?
 
V

vince23

Nicht mehr ganz neu hier

AW: CSS Boxenproblem

Also das Problem habe ich jetzt lösen können:

offenbar spielt die Reihenfolge der Klassen im Stylesheet eine Rolle.
Wenn man die neu erstellten Klassen nach oben verschiebt ( im stylesheet ), dann
funktionieren sie auch. Wieso das so ist, weiß ich nicht.

Zu Clark: das macht Dreamweaver.
 
nostra87

nostra87

Nicht mehr ganz neu hier

AW: CSS Boxenproblem

Wenn du die Margins und Paddings "resetest" - also auf 0px setzt,
müssten eigentlich keine Abweichungen entstehen.

Das gleiche gilt für alle Elemente, wie <h1> und <p> usw.
Du wirst dir eine menge Arbeit ersparen. Hast du deine Webseite
schon auf dem IE6,IE7 und IE8 überprüft? Von Safari ganz zu
schweigen.

Beste Grüße
 
R

ravinray

Noch nicht viel geschrieben

AW: CSS Boxenproblem

vince23 schrieb:
Also das Problem habe ich jetzt lösen können:

offenbar spielt die Reihenfolge der Klassen im Stylesheet eine Rolle.
Wenn man die neu erstellten Klassen nach oben verschiebt ( im stylesheet ), dann
funktionieren sie auch. Wieso das so ist, weiß ich nicht.

Zu Clark: das macht Dreamweaver.
Zum Vergrößern anklicken....
browser cachen! wie oben schonmal erwähnt, strg+f5 (oder im firefox auch strg+r). aus meiner sicht liegt das viel eher daran.
eine persönliche vorliebe ist es, html- (und css-) code selber zu schreiben, dann passiert sowas wie 2x<p> usw nicht.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 282 (Mitglieder: 11, Gäste: 271)
Robots: 944

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben