ilch.de :: Forum :: Allgemein :: HTML, PHP, SQL,...

HTML:

<div>Hello World!</div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="wrapper">
  	<div class="leiste_top"></div>
<!--menu-->
        <div id="topbar">
       		<div class="leiste_top"></div>
        	<div id="topbar_container">
        		<div class="navbar">
						<!--menupunkte-->
                		<ul>Home</ul>
                        <ul>Verein</ul>
                        <ul>Herren</ul>
                        <ul>Damen</ul>
                        <ul>Nachwuchs</ul>
                        <ul>Sponsoren</ul>
                 </div>
                <div class="socialmedia">
                	<div class="fb_icon"></div>
                  	<div class="twitter_icon"></div>
                </div>
             </div>
        </div>
<!--kopfzeile mit logo-->
	<div id="kopfzeile">
    	<div class="logo"></div>
    </div>
<!--kopfzeile mit logo-->
	<div id="content" style="clear:left">
    		<div id="content_left">
            		<div class="maintext">Hier stehen die News.</div>
            </div>
            <div id="content_right">adasdasd</div>
    </div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>

</html>

CSS:

@charset "utf-8";
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/* A more considered reset; more of a restart... As per: csswizardry.com/2011/10/reset-restarted */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section {
    display: block;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
strong, b, mark {
    font-weight: bold;
    font-style: inherit;
}
em, i, cite, q, address, dfn, var {
    font-style: italic;
    font-weight: inherit;
}
abbr[title], dfn[title] {
    cursor: help;
    border-bottom: 1px dotted;
}
ins {
    border-bottom: 1px solid;
}
a, u, ins {
    text-decoration: none;
}
del, s {
    text-decoration: line-through;
}
pre, code, samp, kbd {
    font-family: monospace;
}
small {
    font-size: 0.75em;
}
img {
    border: none;
    font-style: italic;
}
input,
select, option, optgroup,
textarea {
    font: inherit;
}



/*------------------------------------*\
    $MAIN
\*------------------------------------*/
body {
	background: url('images/background.jpg') no-repeat fixed;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	-webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
    margin: 0 auto;
}

#wrapper {
	width: 100%;
	height: auto;
}

.leiste_top {
	width: 100%;
	height: 5px;
	background-color: #df0023;
	position: fixed;
}

#kopfzeile {
	width: 960px;
	height: auto;
	margin: 0 auto;
}

.logo {
	background: url('images/logo.png') no-repeat;
	width: 161px;
	height: 87px;
	margin-top: 40px;
	margin-bottom: 40px;
	float: left;
}

#content {
	width: 940px;
	height: auto;
	background: #fff;
	opacity: 0.25;
	padding: 10px;
	margin: 0 auto;
}


/*------------------------------------*\
    $Menu
\*------------------------------------*/
#topbar {
	background: url(images/menu_bg.png);
	width: 100%;
	height: 40px;
	margin: 0 auto;
	float: left;
	position: fixed;
}

#topbar_container {
	width: 960px;
	height: 40px;
	margin: 0 auto;
	line-height: 40px;
}

.navbar {
	width: auto;
	height: 40px;
	float: left;
	display: block; 
	margin-left: -20px;
}

ul {
	float: left;
	font-size: 13px;
	display: block;
	font-weight: bold;
	padding-left: 20px;
	padding-right: 20px;
 
}


/*------------------------------------*\
    $SocialMedia
\*------------------------------------*/
.socialmedia {
	width: auto;
	height: 40px;
	float: right;
	display: block; 
}
.fb_icon {
	background: url('images/icons/facebook.png') no-repeat; 
}


/*------------------------------------*\
    $Content
\*------------------------------------*/
#content {
	width: 940px;
	height: auto;
	background: #fff;
	opacity: 1;
	padding: 10px;
	margin: 0 auto;
}

#content_left {
	width: 700px;
	height: auto;
	float: left;
}

#content_right {
	width: 200px; 
	height: auto;
	padding-left: 20px;
	float: left;
}

.maintext {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

und jetzt möchte ich keine Punkte als Trennung sondern ein Bild einfügen.
Außerdem hab ich es mal wider mit clear:both vermasselt, denn beim content läuft der background nicht mit... verletzt

Zuletzt modifiziert von ekie am 01.04.2014 - 21:20:10

Geschlossen

	Zurück zu HTML, PHP, SQL,...

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Menüpunkt Trennlinie