Einige Probleme mit anpassung per CSS

AnD3rS

Hier erst mal der temporäre Link zum Blog (kleiner Testserver auf meinem PC): http://and3rs.no-ip.org
Warum sind die h2 in den Beiträgen und der Sidebar in der gleichen Farbe, obwohl extra #sidebar h2 definiert wurde. Die Größe nimmt er schon her.
Dann, wie kann ich den weißen Hintergrund hinter der commentform wegbekommen, der in die Sidebar reinragt. Und wie bekommen ich den submitbutton breiter.
Und vor allem: was zum Teufel macht der IE aus der Seite?

Bin über jede Hilfe dankbar.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

suedkind

auf deinen link komme ich nicht, poste doch den relevanten code

AnD3rS

Hmm, müsste eigentlich funktionieren, naja, DSL halt.

Code

/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background-color: #2E4051;
	color: #000000;
	text-align: left;
	}


#page {
	background-color: white;
	text-align: left;
	}


#header {
	background-color: #2A8FBD;
	}


#content {
	font-size: 1.2em
	}


.widecolumn .entry p {
	font-size: 1.05em;
	}


.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}


.widecolumn {
	line-height: 1.6em;
	}


.narrowcolumn .postmetadata {
	text-align: center;
	}


.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	width: 450px
	}


#footer {
	background-color: #eee;
	}


small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}


h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	}


h1 {
	font-size: 4em;
	}


.description {
	font-size: 1.6em;
	text-align: center;
	}


h2 {
	font-size: 1.6em;
	}


h2.pagetitle {
	font-size: 1.6em;
	}


#sidebar h2 {
	font-family: 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1.2em;
	}


h3 {
	font-size: 1.3em;
	}


h1, h1 a, h1 a:hover, h1 a:visited, .description {
	text-decoration: none;
	color: #B11623;
	}


h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #2E4051;
	}


h2, h2 a, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
	text-decoration: none;
	}


.entry p a:visited {
	color: #A40802;
	}


.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}


.commentlist li {
	font-weight: bold;
	}


.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}


.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}


#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}


.commentmetadata {
	font-weight: normal;
	}


#sidebar {
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}


small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #5D5C5F ;
	}


code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}


acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}


h2 a:hover, h3 a:hover {
	color: #A40802;
	text-decoration: underline;
	}


a {
	color: #990000;
	text-decoration: none;
	}


a:hover {
	color: #990000;
	text-decoration: underline;
	}




/* End Typography & Colors */






/* Begin Structure */
body {
	margin: 0;
	padding: 0;
	}


#page {
	background-color: white;
	margin: 20px auto;
	padding: 0;
	width: 800px;
	}


#header {
	padding: 0;
	margin: 0 0 0 0;
	height: 160px;
	width: 100%;
	background-image: url("450-348.png") ;
	}




#headerimg {
	margin: 0;
	height: 160px;
	width: 100%;


	}


.narrowcolumn {
	float: left;
	padding: 0 0 15px 35px;
	margin: 0px 0 0;
	width: 550px;
	background-image: url("550.png") repeat-y;
	}


.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}


.post {
	margin: 0 0 40px;
	text-align: justify;
	}


.widecolumn .post {
	margin: 0;
	}


.narrowcolumn .postmetadata {
	padding-top: 5px;
	}


.widecolumn .postmetadata {
	margin: 30px 0;
	}


#footer {
	padding: 0 0 0 0px;
	margin: 0 auto;
	width: 800px;
	clear: both;
	background-image: url("800.png");
	text-align: center;
	}


#footer p {
	margin: 0;
	padding: 10px 0;
	width: 550px;
	color: #000000;
	}
#footer p a, #footer p a:visited {
	color: #000000;
	text-decoration: underline;
	}
/* End Structure */






/*	Begin Headers */
h1 {
	padding-top: 50px;
	margin: 0;
	width: 450px;
	text-align: center;
	}


.description {
	text-align: center;
	width: 450px;
	}


h2 {
	margin: 30px 0 0;
	}


h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}


#sidebar h2 {
	margin: 5px 0 0;
	padding: 0;
	}


h3 {
	padding: 0;
	margin: 30px 0 0;
	}


h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	}
/* End Headers */
















/* Begin Form Elements */
#searchform {
	margin: 0px auto;
	padding: 5px 3px;
	text-align: center;
	}


#sidebar #searchform #s {
	width: 115px;
	padding: 2px;
	}


#sidebar #searchsubmit {
	padding: 1px;
	}


.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
	}


select {
	width: 130px;
	}


#commentform input {
	width: 130px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}
#commentform p {
	background-image: url("550.png");
	width: 450px;
	}
#commentform textarea {
	width: 450px;
	padding: 2px;
	}


#commentform #submit {
	margin: 0;
	float: right;
	}
/* End Form Elements */






/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
	}


.commentlist {
	padding: 0;
	text-align: justify;
	}


.commentlist li {
	margin: 15px 0 3px;
	padding: 5px 10px 3px;
	list-style: none;
	}


.commentlist p {
	margin: 10px 5px 10px 0;
	}


#commentform p {
	margin: 5px 0;
	background-image: url("550.png");
	}


.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}


.commentmetadata {
	margin: 0;
	display: block;
	}
/* End Comments */






/* Begin Sidebar */
#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 550px;
	width: 248px;
	background-image: url("250.png");
	background-color: #000000;
	}


#sidebar form {
	margin: 0;
	}
/* End Sidebar */

Alles anzeigen

janny

Also ich kam auf die Seite.

Zitat von AnD3rS

Dann, wie kann ich den weißen Hintergrund hinter der commentform wegbekommen, der in die Sidebar reinragt.

Versuche mal generell narrowcolumn schmaler zu machen, denke dass das schon hilft. Um das Feld zur Kommentareingabe kleiner zu machen, musst du an #commentform textarea rumspielen.

Zitat

Und wie bekommen ich den submitbutton breiter.

Da musst mal bissel bei #commentform #submit rumspielen.

Zitat

Und vor allem: was zum Teufel macht der IE aus der Seite?

So schlimm siehts doch gar nicht aus. Ich denke das Problem legt sich, wenn du, wie oben schon gesagt, mal am narrowcolumn rumspielst.

janny

Okay, ich seh schon. Narrowcolumn löst nur das Problem, dass die Navi nicht über den Strich geht. Hm, dann weiß ich im Moment auch nicht weiter.

AnD3rS

Er hört ab einer gewissen Länge einfach auf, die Hintergrundgrafik anzuzeige. Und ich weiß nicht warum. Ich hab doch extra repeat-y drin.

AnD3rS

So, im Firefox passts jetzt (redundante Grafiken, beide Male mit blauem Streifen *g*), postionierung ist auch okay.

Nur das beschissene MS Teil wills nicht so anzeigen. Erst wird die Sidebar ewig nach untengeschoben und dann zeigt er den Text im Footer über die ganze Seite zentriert an.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Einige Probleme mit anpassung per CSS

Jetzt mitmachen!