[CSS] Border & Rand entfernen?

[Cℓoud]

Servus! :]

Ich bin derzeit dabei meine Homepage wie folgt umzubauen:

Da meine Kenntnisse in Css spartanisch sind bräuchte ich Hilfe, ich würde gerne bei meinen Modulen den Schwarzen Schatten (Bild: Blau) entfernen den man außen sieht und möchte außerdem beim weißen Background (Bild: Rot) hinter den Modulen den kleinen Überschuss entfernen, siehe Bild:

Mein Css sieht wie folgt aus:

 Spoiler

body {
	background: #7a00bb url('../images/background_2.jpg') no-repeat;
	-o-background-size: 100%;
	-webkit-background-size: 100%;
	-khtml-background-size: 100%;
	-moz-background-size: 100%;
	background-size: 100%;
	
	background-position:top center;
    font-family: Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #FFFFFF;
	margin: 0px 0px 0px 0px;
}

img {
	border: none;
}

input, select {
	border: 1px solid white;
	background: #989898;
	color: #FFFFFF;
	margin: 5px 0px 10px 0px;
	font-size: 11px;
}

/*
	Main wrapper for everything
		- center everything
		- fixed width
*/
#wrapper {
	margin: 0px auto 0px auto;
	width: 900px;
}

#header {

	height: 0px;
	display: block;
	text-align: left;
	
}

#menu {
	background-image: url(../images/Menu.jpg);
	background-repeat:no-repeat;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: solid 0px #000000;
	border-radius: 0px 0px 0px 0px;
	height: 80px;
	margin-bottom: 0px;
	padding: 0px;
	/*border: 1px;
	border-style:solid;
	border-color:black;*/
}

#menu a.link {
	width: 178px;
	display: block;
	float: left;
	font-size: 12px;
	text-align: center;
	text-transform:none;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 32px;
}

#menu a:hover {
	color: gold;
}
#menu img {
	float: left;
}

#main {
	min-height: auto;
	display: block;
	padding: 0px;
	overflow: auto;
	
}
#wrapper2 {
	background: rgba(255,255,255, .9);	
	-webkit-box-shadow: 0px 0px 0px 0px #363636;
	-moz-box-shadow: 0px 0px 0px 0px #363636;
	box-shadow: 0px 0px 0px 0px #363636; 
	
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px; 
}

#sidebar {
	/*background: #383838;*/
	background: rgba(23,30,54, .0);
	width: 160px;
	margin-left: 0px;
	display: block;
	float: left;
	padding: 5px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	border: solid 0px #000000;
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px; 

	
}

#sidebar a:hover {
	color: gold;
}


#sidebar2 {
	/*background: #383838;*/
	background: rgba(23,30,54, .0);
	width: 160px;
	min-height:444px;
	padding: 5px;
	float:right;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	border: solid 0px #000000;
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px;
}

#sidebar2 a:hover {
	color: rgba(54,70,121);
}


#content {
	/*background: #383838;*/
	background: rgba(23,30,54, .0);
	width: 512px;
	margin-left: 15px;
	padding: 9px 9px 9px 9px;
	overflow: hide;
	margin-bottom: 30px;
	float:left;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	border: solid 0px #000000;
	-webkit-border-radius: 0px 0px 0px 0px;
	border-radius: 0px 0px 0px 0px; 
}


#content a:link {
	color: #FFD700;
}

#content a:visited {
	color: #FFD700;
}

#conten a:hover {
	color: #FFFFFF;
}





.title {
	background:url('../images/title.png');
	border: solid 0px #000000;
	height: 20px;
	display: block;
	font-size: 12px;
	text-align: center;
	text-transform:uppercase;
	font-weight: bold;
	color: #FFF;
	padding: 5px 0px 0px 0px;
}

.title a{
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
}

.title a:hover{
	text-decoration: none;
}

.title2 {
	background:url('../images/DownloadB.jpg');
	border: solid 0px #3c4d85;
	height: 36px;
	display: block;
	font-size: 12px;
	text-align: left;
	text-transform:uppercase;
	font-weight: bold;
	font-family: corbel;
	padding: 12px 0px 0px 0px;
}

.title2 a{
	color: #3c4d85;
	font-size: 18px;
	text-decoration: none;
}

.title3 {
	background:url('../images/DonateB.jpg');
	border: solid 0px #3c4d85;
	height: 36px;
	display: block;
	font-size: 12px;
	text-align: left;
	text-transform:uppercase;
	font-weight: bold;
	font-family: corbel;
	padding: 12px 0px 0px 0px;
}

.title3 a{
	color: #FFFFFF;
	font-size: 18px;
	text-decoration: none;
}


h1 {
	border-bottom: 1px dotted #FFFFFF;
	margin: 0px;
	padding: 0px;
	font-size: 15px;
	text-transform:uppercase;
}

h2 {
	border-bottom: 1px dotted #4c9ad3;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	text-transform:uppercase;
}

h3 {
	border-bottom: 1px dotted #4c9ad3;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	text-transform:uppercase;
}

h1 small {
	float: right;
	font-size: 10px;
	text-transform: none;
	margin-top: 10px;
}

#quickBar img{
	margin-left: 5px;
	padding-top: 17px;
}

.details, .submenu {
	background: #b7ebff;
	height: 17px;
	display: block;
	margin-bottom: 20px;
	padding-top: 3px;
	text-align: center;
}

#footer {
	background: #FFFFFF;
	background-repeat:no-repeat;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: solid 0px #000000;
	border-radius: 0px 0px 0px 0px;
	height: 27px;
	margin-bottom: 164px;
	text-align: center;
	padding: 4px;
	/*border: 1px;
	border-style:solid;
	border-color:black;*/
}

hr {
	border: none;
	border-bottom: 1px dotted #4c9ad3;
}

.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 0px;
    padding: 10px;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
}

/* Mall */
.mall-item {
	float: left;
	width: 225px;
	height: 100px;
	display: block;
}

.image {
	background: url('../images/none.png');
	width: 36px;
	height: 36px;
	display: block;
	margin-top: 2px;
	float: left;
}

.description {
	width: 180px;
	height: 36px;
	display: block;
	overflow: hidden;
	padding: 2px 0px 0px 4px;
	float: left;
	font-size: 10px;
}

.stats {
	width: 200px;
	height: 40px;
	display: block;
	font-weight: normal;
}

table.cashShop {

}

table.cashShop td {
	text-align: center;
}

table.cashShop td h1 {
	font-size: 12px;
	border: none;
	text-transform: none;
}

table.cashShop td small {
	font-size: 12px;
	text-transform: none;
	color: #4c9ad3;
}

Ich hoffe mir kann da jemand behilflich sein. ~.~

Derjenige der mit hilft das Problem zu lösen, bekommt als Danke 10 E*Gold.

[マルコ]

Entferne einfach überall box-shadow.

[UserIsGrateful]

@Cℓoud


Mal paar kleine Hinweise! Zunächst solltest du deine CSS-Dateien klar strukturieren und mit Standards beginnen lassen:

* {
   border: none;
   margin: 0px;
   padding: 0px;
}

Daraufhin kannst du dann klar und einzeln deine DIVs und alles weitere definieren, wie du magst. Desweiteren solltest du einfach:

/* das 'fixed' ist Ansichtssache */
background: url("../images/background_2.jpg") no-repeat fixed center 0 #7a00bb;

statt

background: #7a00bb url('../images/background_2.jpg') no-repeat;

und extra noch

background-position: top center;

nutzen.

Somit sparst du Code und behälst die Übersicht!

border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

kannst du abkürzen, wenn die 4 Angaben immer gleich sein sollten, dann einfach nur so:

border-radius: 0px;
margin: 0px;

Eines noch:

min-height: auto;
/* Bitte weglassen! 'auto' ist standard und 'min-height' sowieso nicht verwenden! */

Zu deiner Frage hat sich マルコ ja bereits geäußert. Einfach die box-shadow Werte löschen oder auf box-shadow: none; setzen!

Okay, ich denke die paar Tipps helfen dir auch zukünftig weiter und falls mal Fragen zu CSS auftreten sollten, bin ich auch per PN verfügbar .


Ein THANKS wäre schön, wenn es geholfen hat.

[Synatex]

/* das 'fixed' ist Ansichtssache */
background: url("../images/background_2.jpg") no-repeat fixed center 0 #7a00bb;

statt

background: #7a00bb url('../images/background_2.jpg') no-repeat;

und extra noch

background-position: top center;

nutzen.

Warum sollte man so etwas machen? Dann kann man auch direkt die Attribute in die Einzelteile mit background-image, background-color, .. splitten. Eben darum gibt es doch die Zusammenfassung, scheint mir etwas blöd das dann doch noch zu splitten.

min-height: auto;
/* Bitte weglassen! 'auto' ist standard und 'min-height' sowieso nicht verwenden! */

Was soll denn an min-height so schlimm sein? Es ist in den meisten Fällen echt nützlich, besonders wenn man weiß das der vordefinierte Raum groß sein muss aber größer werden kann, aber eine Minimalhöhe braucht (beispielsweise beim floating)

[UserIsGrateful]

@Synatex


Ich glaube du hast entweder nicht genau verstanden, was ich mit dem post ausdrücken wollte (ausdrücke) oder wir reden aneinander vorbei, denn JA, ich empfinde die Zusammenfassungen auch als nützlich und sinnvoll!

Bitte Cℓouds Spoilertext beachten!

Cℓoud hat in seinem Spoilertext, in seinem Code, die Attribute einzeln aufgeführt! Darum habe ich ja geschrieben, dass er es mit dem Inhalt meiner ersten CodeBox (" /* das 'fixed... "), zusammenfassen kann STATT (wie die beiden weiteren CodeBox-Zitate (aus seinem Spoilertext)) das Ganze splitten!

Zu min-height und deiner Argumentation sage ich nur: Du hast recht . Ja beim floating kann das nützlich sein, doch du beschreibst ja damit auch dynamische Verhältnisse, sprich' etwas anspruchsvoller im Vorgehen bzw. Ablauf, wenn dies gewünscht ist. Was einfach nur heißen soll, dass es richtig so ist er jedoch min-height: auto; sicherlich nicht verwenden muss.


Danke für deine konstruktive Kritik, besser als manches "bla bla ... du bist so blöd" von anderen Usern!

[Cℓoud]

Danke UserIsGrateful ich werde es mal mitnehmen und mein css, dementsprechend anpassen. Zu マルコ dir auch danke, das ich box-shadow entfernen muss wusste ich, jedoch habe ich dies vergeblich in meinem css gesucht und da ich es nicht gefunden habe nachgefragt, bis mir dann eingefallen ist das ich dies in meiner index.php deklariert habe.