CSS Objekte blockieren sich gegenseitig

RageComics · 28. Juni 2013

Hallo, ich versuche momentan für meine Musikgruppe eine Webseite zu schreiben.

Leider habe ich dabei ein kleines Problem: Die beiden Bilder (Twitter, Soundcloud), sollen eigentlich unter dem Banner stehen.

Um es für euch verständlich zu machen, hier mal der Link zu der betroffenen Seite (ich habe sie auf meinem privaten ftp server hochgeladen):

http://rage-comics.bplaced.net/website/.

Außerdem wird die HR, die ich unter der Navi platziert habe, von irgendeinem anderen Objekt blockiert.

Im Anhang habe ich ein Bild, welches veranschaulichen soll, wie ich es eigentlich haben möchte.

Vielen Dank im Voraus

Benni16it · 28. Juni 2013

#content hr "width: 100%" hinzufügen und die zwei bilder in den Banner Div und dort positionieren wie du es gern hättest.

Znrl · 28. Juni 2013

Normal schreibt man für XHTML <hr /> nicht <hr/> oder einfach <hr>, wenns kein XHTML sein muss (gleiches für <br />).

HTML:

body {
	background-color: #ECECEC;
}

#border {
	border: 2px double #000000;
	color: #000000;
	font-family: Arial;
	font-size: 11pt;
	background-color: #FFD88A;
	width: 720px;
	margin:  0 auto;
}

#content {
	background-color: #FFFFFF;
	width: 500px;
	margin: 10px 20px 20px 20px;
	padding-top: 2px;
	position: relative;
}

#banner {
    float: right;
    margin-top:10px;
    padding-left: 40px;
    padding-left:5px; 
    background-color: #FFFFFF;
    background-image: url(images/banner.jpg);
    height:180px;
    width:250px;
    border-color: #000000;
    border-style: double;
    border-width: 2px;
    position: relative;
    right: -100px;
}

#nav a {
   text-decoration: none;
   margin-left: 10px;
   margin-right: 10px; 
   color: #000000;
}

#nav a:hover {
    color: #808080; 
}
#nav {
	padding-bottom: 25px; /* Abstand zur Linie <hr> */
}

#nav ul {
	text-align: center;
	width: 500px;
	margin: 0 auto;
	padding: 0px 0px 20px 0px;
	position: absolute;
    list-style-type: none;
}

#nav li {
	display: inline-block;
}

#content hr {
	border: 0px;
	border-bottom: 1px dashed #333; 
	width: 500px;
}

#content p {
    padding:  0px 10px 0px 10px;
    font-size: 10pt;
}

#content h1 {
    color: #808080;
    text-shadow: 1px 1px 0px;
    font-size: 30pt;
}

#content .active {
    color: #808080;
}

#twittersoundcloud {
    float: right;
    margin-top: 210px;
    padding-left: 40px;
    position: relative;
    right: -200px;
}

edit: hatte irgendwie das Menü nicht richtig übernommen

RageComics · 28. Juni 2013

danke dafür, aber jetzt hab ich da irgendwie ne große lücke zwischen der nav und der hr (siehe foto oder direkt die seite). woran könnte das liegen?

Znrl · 28. Juni 2013

Bei mir nicht.
Was benutzt du für einen Browser?
Mach mal aus inline-block nur inline bei #nav li.

RageComics · 28. Juni 2013

komisch, das hilft nicht. ich habe google chrome version 27.0.1453.116 m

Znrl · 28. Juni 2013

Ok also wenn ich bei hr noch
display: inline;
mach, klappts.

RageComics · 28. Juni 2013

Znrl schrieb:
Ok also wenn ich bei hr noch
display: inline;
mach, klappts.

richtig komisch, wenn ich das machen ist zwar die lücke weg, jedoch ist dann auch die hr verschwunden

Znrl · 28. Juni 2013

OK..^^

Versuch das:

HTML:

 hr+p {
     margin-top: 20px;
 }

#content hr {
	position: absolute;
	border: 1px dashed #333; 
	width: 500px;
}

RageComics · 28. Juni 2013

ja mann danke aber kann man den strich noch ein bisschen dünner machen?

Znrl · 28. Juni 2013

HTML:

#content hr {
position: absolute;
border: none;
border-top: 1px dashed #333;
width: 500px;
}

Das ist eben ein Rahmen, und der ist oben und unten.

So ist das dann nur noch unten und dünner als 1 px geht nicht. Kannst es nur dünner wirken lassen.

RageComics · 28. Juni 2013

so ich hab das zeug jetzt auf den ftp server hochgeladen. auf der startseite ist auch alles wunderbar aber unter #releases ist zwischen dem cover und der hr wieder so ne komische lücke. dabei hab ich den code exakt übernommen

http://rage-comics.bplaced.net/website

außerdem ist der text auf der startseite ein wenig eingedrückt

Znrl · 28. Juni 2013

Was heißt eingedrückt?

Der Pfad zum Cover ist falsch: images\cover.jpg korrigier das mal noch.

RageComics · 28. Juni 2013

der pfad ist doch richtig, sonst würde das bild doch nicht angezeigt werden.

die zeilen vom text werden nicht da abgebrochen wo ich eine break gesetzt habe, sondern früher (vergleich es mal mit dem bild, welches ich weiter oben im anhang drin habe)

Znrl · 28. Juni 2013

Nein Chrome ist da nur scheinbar tolleranter als Firefox, bei mir wird das Bild nicht angezeigt.

\ vs /

edit:
Also: images/cover.jpg

Da du dich für XHTML entschieden hast musst du auch die <meta ... /> und <link .. /> mit "/" abschließen und auch bei <img /> noch ein space vor "/".

Ich schau mir das nochmal an.

edit2:
ohne float:

HTML:

body {
	background-color: #ECECEC;
}
 
#border {
	border: 2px double #000000;
	color: #000000;
	font-family: Arial;
	font-size: 11pt;
	background-color: #FFD88A;
	width: 720px;
	margin:  0 auto;
}
 
#content {
	background-color: #FFFFFF;
	width: 500px;
	margin: 10px 20px 20px 20px;
	padding-top: 10px;
	position: relative;
}
 
#banner {
    margin-top: 10px;
    padding-left: 40px;
    padding-left: 5px; 
    background-color: #FFFFFF;
    background-image: url(images/banner.jpg);
    height: 180px;
    width: 250px;
    border: 2px double #000000;
    position: absolute;
    right: 220px; /* Banner rechts links verschieben */
}

#twittersoundcloud {
	position: absolute;
    margin-top: 210px;
    padding-left: 40px;
    right: 350px; /* twitter/soundcloud rechts links verschieben */
}

#nav a {
   text-decoration: none;
   margin-left: 10px;
   margin-right: 10px; 
   color: #000000;
}
 
#nav a:hover {
    color: #808080; 
}
#nav {
	padding-bottom: 35px; /* Abstand zur <hr /> nch unten */
}
 
#nav ul {
	text-align: center;
	width: 500px;
	margin: 0 auto;
	padding: 0px 0px 10px 0px;
	position: absolute;
    list-style-type: none;
}
 
#nav li {
	display: inline;
}
 
#content hr {
	border: none;
	border-top: 1px dashed #333;
	width: 500px;
	margin: 0px;
	padding: 0px;
}

#content p {
    padding: 0px 10px 0px 10px;
    font-size: 10pt; 
}
 
#content h1 {
    color: #808080;
    text-shadow: 1px 1px 0px;
    font-size: 30pt;
}
 
#content .active {
    color: #808080;
}

RageComics · 29. Juni 2013

jetzt ist diese lücke weg aber das banner und die buttons sind weggedrückt worden.

damit du nochmal verstehen kannst was ich mit dem eingequetschten text auf der startseite meine:
(tschuldigung wegen dem roten gekritzel, ich hatte keinen anderen screenshot mehr)

Znrl · 29. Juni 2013

Ich hab noch nen bischen geändert (Kommentare).

Hast du denn den ganzen Code übernommen?
Ersetz mal dein .css damit. Bei mir hat das auch im IE und Chrome gepasst, mit den Zeilenumbrüchen und der Position der Grafiken links.
Auf deiner Website ist aber noch nicht alles übernommen.

RageComics · 29. Juni 2013

so bei mir klappt jetzt alles. sieht das bei dir auch richtig aus?

Znrl · 29. Juni 2013

Ok, sry das mit position: absolute war doof (änder mal die Fensterbreite). Man sollte es halt doch gründlich machen.
Im HTML Teil:

HTML:

<div id="border">
<div id="right">
<div id="banner"><img src="/images/banner.jpg" width="250" height="180" alt="" title="" /></div>

<div id="twittersoundcloud">
<a href="http://twitter.com/kunstkabuff" target="_blank" title="Twitter"><img src="images/twitter.png" width="50" height="50" alt="" title="" /></a>
<a href="http://soundcloud.com/kunstkabuff" target="_blank" title="Soundcloud"><img src="images/soundcloud.png" width="50" height="50" alt="" title="" /></a>
</div>
</div>

Du solltest bei allen alt="" auch noch was reinschreiben, wenn man das gleich macht vergisst mans hinterher nicht.
Im head bei "meta" und "link" auch noch nen space " " vor "/".

Ansonsten css:

HTML:

body {
	background-color: #ECECEC;
}
 
#border {
	border: 2px double #000000;
	color: #000000;
	font-family: Arial;
	font-size: 11pt;
	background-color: #FFD88A;
	width: 720px;
	margin:  0 auto;
}
 
#content {
	background-color: #FFFFFF;
	width: 500px;
	margin: 10px 20px 20px 20px;
	padding-top: 10px;
	position: relative;
}
#right {
	float: right;
	width: 250px;
	height: 260px;
	margin-top: 10px; /* Banner+twitter nach unten verschieben */
	margin-right: -80px; /* Banner+twitter nach rechts/links verschieben */
}

#banner {
    background: #FFFFFF;
    height: 180px;
    width: 250px;
    border: 2px double #000000;
}

#twittersoundcloud {
	margin-top: 10px; /* Abstand zum banner nach */
	margin-left: 15px; /* Abstand recht/links */

}

#nav a {
   text-decoration: none;
   margin-left: 10px;
   margin-right: 10px; 
   color: #000000;
}
 
#nav a:hover {
    color: #808080; 
}

#nav {
	padding-bottom: 35px; /* Abstand zur <hr /> nch unten */
}
 
#nav ul {
	text-align: center;
	width: 500px;
	margin: 0 auto;
	padding: 0px 0px 10px 0px;
	position: absolute;
    list-style-type: none;
}
 
#nav li {
	display: inline;
}
 
#content hr {
	border: none;
	border-top: 1px dashed #333;
	width: 500px;
	margin: 0px;
	padding: 0px;
}

#content p {
    padding: 0px 10px 0px 10px;
    font-size: 10pt; 
}
 
#content h1 {
    color: #808080;
    text-shadow: 1px 1px 0px;
    font-size: 30pt;
}
 
#content .active {
    color: #808080;
}

RageComics · 29. Juni 2013

so hab ich übernommen und hab überall bei alt was reingeschrieben: http://rage-comics.bplaced.net/website/

CSS Objekte blockieren sich gegenseitig

Cadet 2nd Year

Anhänge

Lieutenant

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Lieutenant

Cadet 2nd Year

Ähnliche Themen