zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Rahmen und Farbänderung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.09.2012, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.09.2012
Beiträge: 1
Steffi82 befindet sich auf einem aufstrebenden Ast
Standard Rahmen und Farbänderung

Hallo zusammen,

leider bin ich im CSS eine ziemliche Niete und suche nun schon das Internet ab, aber leider kommt nie das gewünschte Ergebnis raus.

Ich habe den unten stehenden CSS Code - dieser stellt das Layout einer HTML Seite dar.

Nun ist es aber so, das bisher die Überschriften h1 und h3, sowie die Links blau dargestellt werden.

Ich möchte aber, dass bei den Überschriften h1 und h3 die Schriftfarbe weiß ist und die Überschriften in einem ausgefüllten roten Rahmen/Block stehen.

Und bei den Links, diese sollen in der gleichen roten Schrift dargestellt werden wie der Rahmen um die Überschriften ist, und die Farbe soll sich auch nach anklicken der Links nicht verändern.

Ich hoffe es kann mir jemand weiterhelfen - ich würde mich riesig freuen!!!

Vielen Dank schonmal im Vorfeld!

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

body {
	color: #333;
	font-size: 12px;
	font-family: arial, helvetica, verdana, sans-serif;
	background-color: #fff;
	text-align: left;
	margin-bottom: 20px;
	margin-left: 30px; }
	
p, h1, h2,  {
	margin-bottom: 1.8em;
	line-height: 1.3em;
 }
	
a:link, a:visited {
	color: #cc0000;
	text-decoration: none; }
	
a:hover {
	color: #cc0000;
	text-decoration: underline; }

#wraper {
	width: 900px; }

#branding {
	height: 67px; }

	
#branding h1 {
	color: #f63;
	font-size: 14px;
	font-family: arial, helvetica, verdana, sans-serif;
	font-weight: bold;
	text-indent: -9999px;
	width: 324px;
	height: 68px;
	float: left;
	/* padding-top: 48px; */
	overflow: hidden;
	position:relative; 
	margin-bottom: 0; }
	
#branding h1 a span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	background-image: url(../media/department_economics_logo.jpg);
	background-repeat: no-repeat; }	

#branding h3 {
	color: #FFF;
	font-size: 14px;
	font-family: arial, helvetica, verdana, sans-serif;
	font-weight: bold;
	text-indent: -9999px;
	width: 324px;
	height: 68px;
	float: left;
	/* padding-top: 48px; */
	overflow: hidden;
	position:relative; 
	margin-bottom: 0; }
	
#branding h3 a span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	background-image: url(../media/department_economics_logo.jpg);
	background-repeat: no-repeat; }		


#branding h2 {
	text-align: right;
	color: #f63;
	font-size: 14px;
	font-family: arial, helvetica, verdana, sans-serif;
	font-weight: bold;
	text-indent: -9999px;
	width: 151px;
	float: right;
	height: 33px;
	margin-top: 20px;
	overflow: hidden;
	position:relative;
	margin-bottom: 0;  }
	
#branding h2 a span {
	display: block;
  	width: 100%;
	height: 100%;
  	position: absolute;
  	top: 0;
  	left: 0;
  	cursor: pointer;
	background-image: url(../media/johannes_kepler_universitat.jpg);
	background-repeat: no-repeat; }	

#prenav {
	color: #69889a;
	font-size: 10px;
	font-weight: bold;
	height: 16px;
	padding: 3px 0 0 11px; }
	
#prenav a, #prenav a:visited {
	color: #69889a;
	text-decoration: none;
	padding: 0 4px;
	border-right: 1px solid #69889a; }
	
#prenav a.padlock {
	background-image: url(../media/padlock.gif);
	background-repeat: no-repeat;
	background-position: left center;
	overflow: visible;
	padding: 0 4px 0 12px; }	
	
#prenav li.last a, #prenav li.last a:visited {
	border-right: 0px; }		
	
ul#languages, ul#links {
	width: 200px; }	

ul#links { text-align: right; }	

ul#languages, ul#languages li {
	float: left;
	list-style: none;
	display: inline; }

ul#links, ul#links li {
	float: right;
	list-style: none;
	display: inline; }

ul#main_nav {
	color: #fff;
	background-color: #69889a;
	list-style: none;
	padding: 5px 0px; }
	
ul#main_nav li {
	display: inline;
	margin: -2px; }
	
ul#main_nav a, ul#main_nav a:visited {
	padding: 5px 15px; 
	color: #fff;
	text-decoration: none;
	background-color: #69889a; }
	
ul#main_nav a:hover {
	text-decoration: none;
	background-color: #c00;}	
	
ul#main_nav li.active a {
	background-color: #c00; }		
	
#content_wraper {
	padding-top: 10px;
	padding-bottom: 20px; }
	
#sub_nav {
	width: 209px;
	float: left;
	clear: right; }	

#sub_nav li a, #sub_nav li a:visited, #sub_nav ul ul li.active a, #sub_nav ul ul li.active li a, #sub_nav ul ul li.active ul li.active a, #sub_nav ul ul li.active ul li.active li a, #sub_nav ul ul li.active ul li.active ul li.active li a {
	color: #666;
	text-decoration: none;
	display: block; }
	
#sub_nav li a:hover, #sub_nav ul ul li.active li a:hover, #sub_nav ul ul li.active ul li.active li a:hover, #sub_nav ul ul li.active ul li.active li a:hover, #sub_nav ul ul li.active ul li.active ul li.active li a:hover {
	color: #c00;
	text-decoration: none; }		
	
#sub_nav ul {
	list-style: none;
	font-size: 16px;
	padding-top: 15px;
	padding-left: 15px;
	border-color: #d3d9dc;
	border-style: solid;
	border-width: 1px 1px 0 0;
	margin-bottom: 20px; }

#sub_nav ul ul {
	padding: 5px 0 0 15px;
	border-width: 0;
	margin-bottom: 0; }	
	
#sub_nav ul li li {
	list-style: none;
	font-size: 11px;
	padding: 6px 0 6px 13px;
	font-weight: bold;
	margin-left: -15px;
	border-top: 1px solid #d3d9dc; }
	
#sub_nav ul li li li { border-top: 0px; }	
	

#sub_nav ul li a.active, #sub_nav ul ul li.active a, #prenav li.active a, #sub_nav ul ul li.active li.active a, #sub_nav ul ul li.active ul li.active a, #sub_nav ul ul li.active ul li.active ul li.active a, #sub_nav ul ul li.active ul li.active ul li.active ul li.active a {
	color: #c00; }
	
#sub_nav ul li li.last {
	border-bottom: 1px solid #d3d9dc; }		

#sub_nav ul ul ul li.last {
	border-bottom: 0px; }			
	
#content_body {
	width: 690px;
	float: right;
	line-height: 1.5em; }
	
#content {
	width: 490px;
	float: left; }
	
#content_wide { 
	}	
	
#content .inner, #content_wide .inner {
	padding: 0 0 24px 24px; }	
	
#content h1.title, #content_wide h1.title  {
	font-size: 22px;
	font-weight: normal;
	background-color: #d4d9dd;
	padding: 23px 12px 37px;
	margin-bottom: 20px; }

#content h1.title span, #content_wide h1.title span {font-size: 18px; position: relative; top: -4px; }	
	
#content h1, #content_wide h1 { 
	font-size: 18px;
	font-weight: normal; }		
	
#content h2, #content_wide h2 { 
	font-size: 14px;
	font-weight: normal; }
	
#content h3, #content_wide h3  {
	font-size: 14px;
	font-weight: normal; 
	color: #fff;
	background-color: #c66;
	padding: 10px 12px;
	margin-bottom: 6px; 
	margin-top:20px; }	

#content h3 a, #content_wide h3 a  {
	color: #fff;}	
	
#breadcrumbs {
	color: #666;
	font-size: 10px;
	height: 12px;
	padding-bottom: 9px;
	overflow: hidden; }
	
#breadcrumbs a, #breadcrumbs a:visited {
	color: #666;
	text-decoration: underline; }
	
#breadcrumbs a:hover {
	color: #cc0000;
	text-decoration: underline; }		

#content_body ul, #content_body ol, #content_body dl { 
	margin-bottom: 1.3em; 
	padding: 0 40px; }
	
#content_body li, #content_body dd {	
	margin-bottom: 0; }
	
#content_body ul ol li, #content_body ol ul li, #content_body ul ul li, #content_body ol ol li {	
	margin-bottom: .3em; }	

#content_body p { 
	margin-bottom: 1.3em; }

#content_body blockquote.facInfo { margin-left: 12px; margin-bottom: 12px; padding-left: 12px; border-left: 4px solid #c66;}	

#content_sidebar {
	text-align: left;
	width: 184px;
	float: right;
	padding-top: 20px; }
	
#content_sidebar a, #content_sidebar a:visited {
	 text-decoration: none; }

#content_sidebar a:hover {
	text-decoration: none; }	 

.sb_imgframe {
	background-color: #f0f0f0;
	text-align: left;
	padding-bottom: 0px;
	margin-bottom: 1.3em;
	height: 184px; 
	overflow: hidden; }

.sb_dark {
	font-size: 14px;
	line-height: 16px;
	background-color: #69889a;
	background-image: url(../media/sidebar_arrow.gif);
	background-repeat: no-repeat;
	background-position: 9px bottom;
	padding: 9px 9px 37px;
	margin-bottom: 10px;  }

.sb_dark, .sb_dark a, .sb_dark a:visited {
	color: #ffffff; }	

.sb_dark a:hover {
	color: #ffffff; }

.sb_light {
	color: #333333;
	font-size: 14px;
	line-height: 16px;
	background-color: #d3d9dc;
	background-image: url(../media/sidebar_arrow_light.gif);
	background-repeat: no-repeat;
	background-position: 9px bottom;
	padding: 9px 9px 37px;
	margin-bottom: 10px;  }

.sb_light a, .sb_light a:visited {
	color: #333333; }	

.sb_light a:hover {
	color: #333333; }
	
.sb_light blockquote, .sb_dark blockquote {
	font-size: 11px;
	line-height: 13px;
	padding-left: 10px;
	padding-top: 6px; }	

#siteinfo {
	font-size: 11px;
	color: #fff;
	background-color: #69889a;
	padding: 5px 0px 5px 15px;
	clear: both; }

#siteinfo a {color: #fff; padding-left: 70px;}	

.page_top {padding-top: 20px;margin-top: 2em; border-top: #ccc 1px solid; font-size:10px;}
	
	
/* --------- search ------*/

#ajaxSearch_form { }

fieldset { border: 0px solid #333;}

#ajaxSearch_input, #ajaxSearch_submit {
	font-family: arial, helvetica, verdana, sans-serif;
	border: solid 1px #69889a;
	margin-top:20px;
	margin-bottom: 20px; }
	
#ajaxSearch_input {
	font-size: 11px;
	width: 185px;
	padding: 4px;
	margin-left: 15px; }	

#ajaxSearch_submit {
	font-size: 10px;
	background-color: #ebebeb;
	position: relative;
	left: -999px;
	overflow: hidden;
	visibility: hidden;
	padding: 3px;
	margin-left: 3px; }
	
#ajaxSearch_input_home {
	padding: 3px;
	width: 90%;
	font-family: arial, helvetica, verdana, sans-serif;
	border: solid 1px #69889a;
	margin-top:10px;
	margin-bottom: 0px;}	
	
#home_sub #ajaxSearch_input {width: 228px;}	
.ajaxSearch_resultLink {font-weight: bold;}	
.ajaxSearch_highlight, .ajaxSearch_highlight1, .ajaxSearch_highlight3, .ajaxSearch_highlight5 {background-color: #fdfddb;}
.ajaxSearch_highlight2, .ajaxSearch_highlight4, .ajaxSearch_highlight6 {background-color: #d0f8fb;}
/*-----------dir-----------*/

.joblist, .courselist, .present_list {
	margin-bottom: 15px;
	border-bottom: #ccc 1px solid;
	padding-bottom: 0px;}
	
.joblist h2, .courselist h2, .present_list h2 {
	margin-bottom: 5px;
	font-weight: bold;}
	
.joblist.last, .courselist.last, .present_list.last {
	border-bottom: #fff 1px solid;}	
	
/*-----------Home Page-----------*/
#home_top {
	color:     #516b7a;
	font-size:         14px;
	font-family:       arial, helvetica, verdana, sans-serif;
	line-height:       17px;
	/* background-image:  url(../media/home_bg_v2.gif); */
	background-repeat: repeat-y;
	position: relative;
	z-index: 10; }

#home_top img {	padding-bottom: 20px; }

#home_sub {
	/* background-image: url(../media/home_bg_v2.gif); */
	background-repeat: repeat-y;
	padding-top: 20px;
	clear: both; }

.col_wide {
	width: 680px;
	float: left; 
	border-right: 1px solid #ccc }

#home_top .col_wide p {
	padding-right: 10px;}	

.col_slim {
	width: 219px;
	z-index: 1;
	float: left; }

#home_top .col_slim .inner { padding: 18px 14px; }
#home_sub .col_slim .inner { padding: 0px 10px 18px 8px; }
#home_sub .col_slim {width: 224px}

.col_slim h1 {	font-size:     14px;
	font-weight:   bold;
	line-height:   16px;
	margin-top:    0;
	margin-bottom: 5px; }

.col_slim ul {	font-size:     12px; 
	font-weight:   normal;
	line-height:   14px;
	text-align:    left;
	margin-bottom: 15px; }

.col_slim li {	
	background-image:    url(../media/list_arrow.gif);
	background-repeat:   no-repeat;
	background-position: 1px 4px;
	list-style-type:     none;
	display:             block;
	padding:       0px 8px 12px 13px; }

.col_slim li a {	color: #333; }

#home_sub .sb_light, #home_sub .sb_dark { 
	height: 123px;}	
	
#home_sub .sb_light blockquote, #home_sub .sb_dark blockquote { 
	padding-top: 64px;}	
	
#box1 blockquote {
	background-image: url(../media/img_home_box1.jpg);
	background-repeat: no-repeat;
	background-position: 0 8px; }	
	
#box2 blockquote {
	background-image: url(../media/img_home_box2.jpg);
	background-repeat: no-repeat;
	background-position: 0 8px; }	

#box3 blockquote {
	background-image: url(../media/img_home_box3.jpg);
	background-repeat: no-repeat;
	background-position: 0 8px; }	

#box4 blockquote {
	background-image: url(../media/img_home_box4.jpg);
	background-repeat: no-repeat;
	background-position: 0 8px; }	

#home_sub .col_slim .inner.first { padding-left: 0px; padding-right: 12px; }	
#home_sub .col_slim .inner.last { padding-right: 0px; padding-left: 10px; }			

.note {
	color: #600;
	padding: 12px;
	background-color: #fdfddb;
	border: dashed 1px #516b7a; }
/*form styles*/
#content fieldset {width: 440px;
	/*background-color: #fdfddb;*/
	text-align: center;
	margin: 0;
	padding: 1em;
	border: solid 1px #333; }
#content input, #content select { padding: 0; margin: 0 10px; }
#content legend {  
	margin-left: 1em;  
	/* color: #ccc;  */
	font-weight: bold;}
#content fieldset.submit {
	padding: 0;
	border-style: none; }
	
#content_body ul.listMenu{
    padding: 10px;
	background-color: #fdfddb;
	font-size:     12px; 
	font-weight:   normal;
	line-height:   14px;
	text-align:    left;
	margin-bottom: 15px;}	
#content_body ul.listMenu li {
	background-image:    url(../media/list_arrow.gif);
	background-repeat:   no-repeat;
	background-position: 1px 4px;
	list-style-type:     none;
	display:             block;
	padding:       3px 8px 3px 13px;}
p.listMenu {
    padding: 10px;
	background-color: #fdfddb;}		
p.listMenu a {
	padding-right: 4px;
	padding-left: 3px;
	border-right: 1px solid #666; }
.listMenu a.active, .listMenu li a.active {font-weight: bold; color: #444; }
#content table, #content_wide table {padding-bottom: 18px; }
#content tr, #content_wide tr {background-color: #fff; }
#content td, #content_wide td {border-bottom: 1px solid red; padding:4px 2px;}
#content th, #content_wide th {background-color: #c66; border-right: 1px solid #c66; color: #fff; padding:4px 2px; }
/*more form styles*/
#regForm label, .loginForm label { display: block; text-align: left; }
#regForm label em {color: #cc0000; font-size: 85%;}	
#regForm fieldset, #addForm fieldset { border: 1px solid #ccc; text-align: left; }	
#regForm input, #regForm textarea, #regForm select, #addForm input, #addForm textarea, .loginForm input {
	background-color: #f5f5f5;
	padding:3px;
	border: solid 1px #ccc;
	width: 95%; }
.loginForm input { width:190px;}
#regForm select.date {width: 7em; height: auto;}	
#regForm textarea { height: 7em;}	
#regForm select { height: auto;}
#regForm .submit input, #addForm .submit input, .loginForm .button {
	font-weight: bold;
	width: 120px;
	background-color: #d6eddd; }		
#regForm fieldset.submit, #addForm fieldset.submit  {border-style: none; padding-top:20px;}
.errors {
	padding: 10px;
	color:#c00;
	border: solid 1px;
	background-color: #fdfddb;
	margin-top: 1.5em;
	margin-bottom: 1.5em; }
.footnote {float: right; color: #cc0000; font-size: 85%;}
.tr_seperator {
	padding-bottom: 10px;
	border-bottom: 1px solid #c00; }
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2012, 14:28
Neuer Benutzer
neuer user
 
Registriert seit: 14.03.2009
Beiträge: 22
moon-walker befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Steffi82 Beitrag anzeigen
Ich möchte aber, dass bei den Überschriften h1 und h3 die Schriftfarbe weiß ist und die Überschriften in einem ausgefüllten roten Rahmen/Block stehen.
Hallo,

Hier ist das entsprechende Kapitel das Tutorials:
5.4 Hintergrund- und Schriftfarben definieren - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

Zitat:
Zitat von Steffi82 Beitrag anzeigen
leider bin ich im CSS eine ziemliche Niete und suche nun schon das Internet ab, aber leider kommt nie das gewünschte Ergebnis raus.
Dann wäre es eine gute Idee, das Tutorial von Anfang an durchzuarbeiten.

Gruß
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2012, 20:26
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Hilfe zur Selbsthilfe ist ja was schönes, aber nur der Verweis auf irgendwelche Tutorials und Lehrseiten oder Bücher halt ich nicht für sinnvoll. In diesem Fall würde es einen kompletten Neuanfang erfordern. Warum dann nicht mit konkreter Hilfe versuchen zu helfen und anzuspornen?

@Steffi82
Ich habe mich nicht 100%ig durch dein CSS durchgearbeitet. Aber wenn du ganz am Anfang deine Überschriften und Links grundsätzlich formatierst, solltest du einen Erfolg erkennen:
Code:
h1, h3 {
color: #fff;
background: #ff0000;
}
a:link, a:visited {
color: #ff0000;
}
Besser wäre es aber, wenn du uns einen Link zu deiner Seite geben würdest, bzw. eine Testseite online stellen könntest.

Peter
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Rahmen erstellen wolkenwalker (X)HTML 3 27.03.2011 11:36
Rahmen um Rahmen bei Bildern uooao388d99 CSS 3 13.12.2008 14:10
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 13:32
Button - Rahmen dieter99 CSS 1 06.12.2006 11:13
automatischen rahmen mit schatten um bilder newbie2004 CSS 2 20.10.2005 17:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:14 Uhr.