• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschiedene Anfängerfragen

E

EVACE Media

Neues Mitglied
Hey,

versuche momentan HTML zu erlernen. Dabei möchte ich ein Screendesign von mir umsetzen:

Startseite - EVACE Media

Bisher schauts so aus:

EVACE Media

Die Bilder im Content werden natürlich später auch noch umgesetzt, jedoch erstmal an die bestehen Probleme :D


  • 1. Problem
Der Footer geht nicht bis zum Ende. Habe schon alles Probiert wie bottom: 0px; oder auch mit margin. Bekomms einfach nicht hin.


  • 2. Problem
Das Suchfeld bekomme ich ebenfalls nicht richtig positioniert. Dort habe ich auch alles mögliche probiert.


  • 3. Problem
Die Navi bekomme ich absolut nicht umgesetzt. Wenn ich ein <div class="navi> habe und die richtig positioniere passt es, jedoch wenn ich dann die navi mit <ul><li> mache ist die komplette Navi außerhalb des divs (auch mit display:inline;). Ebenfalls habe ich keine Ahnung, wie ich die grauen Quadrate zwischen den Links reinbekomme.

Das wars erstmal :D.

Hier der Quellcode:

Code: 
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">


  <!-- Site information -->
	<title>EVACE Media</title>
    <meta name="author" content="EVACE Media">
    <meta name="description" content="EVACE Media. Simply EVACZING." />
    <meta name="keywords" content="evace media, webdesign, screendesign, logodesign, evace, media" />
    <meta name="revisit-after" content="1 days" />
    <meta name="robots" content="ALL" />
    <meta name="robots" content="index, follow" />
    
  <!-- Facebook information -->
    <meta property="og:title" content="EVACE Media" />
    <meta property="og:description" content="EVACE Media. Simply EVACZING." />


  <!-- Stylesheet -->
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" media="screen" href="css/fonts.css" />
    <link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
	<div id="logo">
	</div>
	<div id="social">
    <a href="#"><img src="img/twitter.png" alt="twitter" /></a>
    <a href="#"><img src="img/facebook.png" alt="facebook" /></a>
    <a href="#"><img src="img/skype.png" alt="skype" /></a>
    <a href="#"><img src="img/rss.png" alt="rss" /></a>
    <a href="#"><img src="img/dev.png" alt="dev" /></a>
    </div>
	<div id="pkt">
	</div>
	<div class="suchen">
	</div>
</div>
<div id="contentwrapper">
    <div id="content">
        <div id="slider">
        </div>
        <div class="schatten">
        </div>
        <div id="beschr">
        </div>
        <div id="kunden">
    	</div>
    </div>
</div>
<div id="footerwrapper">
    <div id="footer">
    </div>
</div>
<div id="footerwrapper2">
    <div id="footer2">
    © 2012 COPYRIGHT EVACE MEDIA. ALLE RECHTE VORBEHALTEN.
    </div>
</div>
</body>

Code: 
body {
	background-image: url(../img/headbg.png);
	background-repeat: repeat-x;
	padding: 0;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}


div.wrapper {
	height: 159px;
	width: 995px;
	margin: auto;
}


div#logo {
	background-image:url(../img/LogoBig.png);
	width:149px;
	height:80px;
	margin: 15px 0 7px 9px;
	float:left;
}


div#social {
	width: 148px;
	height: 18px;
	float: right;
	margin: 58px 0 7px 0;
}


div#pkt {
	background-image:url(../img/pkt.png);
	width:995px;
	height:1px;
	float: left;
}
#contentwrapper {
	background-color: #dbdbdb;
	float: left;
	margin-top: 20px;
	width: 100%;
}


#content {
	width: 995px;
	margin: auto;
}


#footerwrapper {
	background-color: #333333;
	float: left;
	width: 100%;
	height: 288px;
}


#footer {
	margin: auto;
	background-image: url(../img/footer.png);
	width: 995px;
	height:288px;
}


#footerwrapper2 {
	background-color: black;
	float: left;
	width: 100%;
	height: 59px;
	bottom: 0px;
	bottom:0;
}


#footer2 {
	width: 995px;
	margin: auto;
	color: #6e6e6e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 59px;
	padding-top: 23px;
	bottom:0;
}


#slider{
	background-image: url(../img/slider.png);
	width: 996px;
	height:371px;
	margin-top: 23px;
}


.schatten{
	background-image: url(../img/schatten.png);
	width: 995px;
	height: 120px;
	-moz-opacity: 0.3;
	opacity: 0.3;
}


.suchen {
	background-image:url(../img/suchen.png);
	background-color: black;
	width: 144px;
	height: 30px;
	float:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	color: white;
	bottom: 14px;
}


#beschr{
	background-image: url(../img/beschr.png);
	width: 995px;
	height:184px;
}


#kunden{
	background-image: url(../img/kunden.png);
	width: 995px;
	height:136px;
	margin: 20px 0 20px 0;
}

Vielen Dank! :)
 
Hallo,

erstmal schön das link zeigst, sonst hätte zumindest ich mir das nicht angeschaut.

Der Footer geht nicht bis zum Ende. Habe schon alles Probiert wie bottom: 0px; oder auch mit margin. Bekomms einfach nicht hin.
Zum Vergrößern anklicken....
das ist daran schuld
Code: 
#footer2 {padding-top: 23px;
Das Suchfeld bekomme ich ebenfalls nicht richtig positioniert. Dort habe ich auch alles mögliche probiert.
Zum Vergrößern anklicken....
dann mach doch einfach margin in die Punktlinie, da muss ja auch für das menü etwas luft rein
Code: 
div#pkt {margin: 0 0 0 5px;}

Die Navi bekomme ich absolut nicht umgesetzt.
Zum Vergrößern anklicken....
das ist schon etwas schwerer.
also zu erst würde ich micht display:inline-block; arbeiten und dann mit zwischen li's mit den Punkt oder halt css3 mit :first das alle den Punkt haben ausser der erste.

Cheffchen
 
Tronjer schrieb:
Außerdem gehört auf die drei unteren Wrapper kein float:left. Diese sollen ja untereinander stehen.
Zum Vergrößern anklicken....

Ohne das float:left wird der footer aber nicht angezeigt?! Und danke an Cheffchen, hab die Navi jetzt soweit hinbekommen. Doch möchte ich nun die Hover in verschiedenen Farben haben (Home orange, Über mich grün etc.) Außerdem werden die Punkte nicht mittig angezeigt, sondern am Anfang. Das nächste Problem ist das der Hover schon aktiv ist auch wenn ich noch nicht auf dem Text bin sondern ein paar cm daneben.

Was muss ich ändern? :D

Navi bisher:

Code: 
<div id="navigation">
			<ul>
            	<li><a class="home" href="#">HOME</a></li>
                <li><a class="blog" href="blog.html">BLOG</a></li>
				<li><a class="ueber" href="#">ÜBER MICH</a></li>
                <li><a class="leistungen" href="#">LEISTUNGEN</a></li>
				<li><a class="referenzen" href="#">REFERENZEN</a></li>
				<li><a class="kontakt" href="#">KONTAKT</a></li>
   	            <li><a class="impressum" href="#">IMPRESSUM</a></li>
			</ul>
			</div>

Code: 
#navigation {
	height: 11px;
	margin: 0;
	padding: 0;
} 
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
} 
#navigation ul li {
	display: inline;
	margin: 0px;
} 
#navigation ul li a {
	height:11px;
	display: block;
	float: left;
	padding: 12px 15px 0 15px;
	font: 12px Arial;
	color: black;
	text-decoration: none;
	background: url(../img/seperator.png) no-repeat right center;
} 


#navigation ul li a:hover {
	color:blue;
}


#navigation ul li#active a {
	color:blue;
}


#navigation ul li a.home:hover,
#navigation ul li#activ a.home {
	color: #c86f14;
}


#navigation ul li a.blog:hover,
#navigation ul li #active a.blog {
	color: #4690c9;
}


#navigation ul li a.ueber:hover,
#navigation ul li a.ueber:active {
	color: #b4b911;
}


#navigation ul li a.leistungen:hover,
#navigation ul li a.leistungen:active {
	color: #ad246b;
}


#navigation ul li a.referenzen:hover,
#navigation ul li a.referenzen:active {
	color: #6f5630;
}


#navigation ul li a.kontakt:hover,
#navigation ul li a.kontakt:active {
	color: #249596;
}


#navigation ul li a.impressum:hover,
#navigation ul li a.impressum:active {
	color: #962424;
}
} 


#navigation ul li a:hover {
    color:blue;
}


#navigation ul li#active a {
    color:blue;
}

Danke ;)

//edit:

So den Hover habe ich jetzt hinbekommen, jedoch a:active mag nicht funktionieren. Habe den Quelltext oben editiert.
 
Zuletzt bearbeitet:
Hallo,
also das mit activ geht ja nun auch, musst halt die id so vergeben:
Code: 
<li id="active">
<a class="blog" href="#">BLOG</a>

wegeb punkt ändere das mal so, also positioniere das mal richtig
Code: 
#navigation ul li a {
background: url("../img/seperator.png") no-repeat scroll right 18px transparent;

dann darft dem letzten eine eigene classe geben und bei der classe den punkt einfach überschreiben also löschen oder ausserhalb verschieben, also die 18px in 100px oder so.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben