Neue Website, Logo als Platzhalter

W

webzombie

Neues Mitglied
Thread Starter
Dabei seit
24.09.2009
Beiträge
10
Reaktionspunkte
0
Hallo liebe Community,

mir ist es schon fast peinlich danach zu fragen aber ich bin halt der Mega Anfänger und habe eigentlich gar keine Ahnung von HTML, CSS usw.

Ich habe mir eine Website gesichert und möchte dort jetzt auf der Seite zentriert ein Logo, darunter den Text "Coming Soon" und dadrunter noch einen Link "Contact" der mir beim klick das email Programm öffnet.

Wie macht man das ohne Tabellen? Vielleicht erbarmt sich hier einer und zeigt mir die Codezeilen!? Wäre echt dankbar!!!

lg
 
Hi

Code: 
CSS:
	.logo {
		position: absolute;
		width: 350px;
		height: 300px;
		left: 50%;
		top: 50%;
		margin-left: -175px;
		margin-top: -150px;
		background-color: #fff;
		border: 1px solid #aaa;
		padding: 0px;
	}

Code: 
HTML:
<div class="logo">Hier das Bild rein</div>
 
erstmal danke für die Antworten. Selfhtml kenne ich und lerne anhand dessen gerade auch.

Mein Problem besteht jedoch immer noch teilweise. Soweit steht zwar alles aber die beiden Texte "contact" (mit dem email link) und "Coming Soon" sollten auch zentriert unter dem Logo stehen. So wie ich es habe ist das Logo zwar zentriert auf der Seite aber die Texte sind dann linksbündig zum Logo. Zudem sollte der Contact Link nicht blau und unterstrichen sein.

Was muß ich denn am folgenden Quelcode ändern?

Code: 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
body {
	font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
}

img {
	border:0;
}

#center {
	width:420px;
	margin-left:auto;
	margin-right:auto;
}

#logo {
	margin:140px auto auto auto;
}

#contact {
	margin:10px auto auto auto;
	font-size:1em;
}

#content {
	margin:30px auto auto auto;
	font-size:3em;
	border:0;
	outline:0;
}
</style>
</head>

<body>
<div id="center">
	<div id="logo"><img src="Logo.jpg"  alt="Logo" /></div>
	<div id="contact"><a href="mailto:test@test.de">Contact</a></div>
	<div id="content"> Coming soon </div>
</div>
</body>
</html>
 
Erstell dir nur einen Container, in dem du dann all deinen Inhalt plazierst und diesen über Klassen definierst. Für den Container dann das unten gezeigte "text-align: center;" setzen, somit wird alles zentriert.

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Testseite </title>
<style type="text/css">

body {
		background-color: #FFF;
		color: #000;
		font-family: Verdana, Arial, Helvetica, Sans-Serif;
		font-size: 1.0em;
		margin: 0;
		padding: 0;
}


#box {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 450px;
		height: 450px;
		margin-left: -225px;
		margin-top: -225px;
		padding: 0px;
		border: 1px solid #444;
		text-align: center;
}


.logo {
		padding: 5px;
}


.contact {
		padding: 5px;
		font-size: 1.0em;
}


.content {
		padding: 5px;
		font-size: 3.0em;
}


.img {
		border: 0;
}

</stlye>

<body>

<div id="box">
	<div class="logo"> <img src="xxx.jpg" /> </div>
	<div class="contact"> <a href="mailto: me@somewhere.biz">contact</a> </div>
	<div class="content"> coming soon </div>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben Unten