Header - One2xs Forum

Lid · Topicstarter

Berichten: 8.302
Reputatie: 0
Punten: 0,00

Lid sinds: 2011
Laatst gezien: 12 jan 2019

27 feb 2011, 20:04

Hey,

Ik heb op www.ewanoomen.nl/layout een header staan maar die wil ik in het midden hebben. Ook wil ik dat hij wordt afgesloten door een andere afbeelding net als je bij het content heb.

De css:

Spoiler tonen

/*
EwanOomen.nl
CSS By Ewan
*/

body {
    margin: 0;
    padding: 0;
    background: #000000; 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #4D4D4D;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #3E3530;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2.8em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    line-height: 180%;
}

ul, ol {
}

a {
    text-decoration: none;
    color: #3E3530;
}

a:hover {
}

#wrapper {
    margin: 0 auto;
    padding: 0;
}

/* Header */

#header {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 0px 0px 0px 30px;
    background: url(images/img0004.png) repeat-y;
        
}

/* Logo */

#logo {
    margin: 0;
    padding: 0;
    color: #000000;
}

#logo h1, #logo p {
    margin: 0;
    padding: 0;
}

#logo h1 {
    letter-spacing: -1px;
    font-size: 3.8em;
}

#logo p {
    margin: 0;
    padding: 0px 0 0 2px;
    font: normal 14px Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    color: #FFFFFF;
} 

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #FFFFFF;
}

/* Search */

#search {
    float: left;
    width: 350px;
    height: 30px;
    padding: 20px 0px 0px 0px;
}

#search form {
    height: 41px;
    margin: 0;
    padding: 0px 0 0 9px;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search-text {
    width: 170px;
    padding: 6px 5px 2px 5px;
    border: 1px solid #DEDEDE;
    background: #FFFFFF;
    text-transform: lowercase;
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #5D781D;
}

#search-submit {
    width: 50px;
    height: 22px;
    border: none;
    background: #B9B9B9;
    color: #000000;
}

/* Menu */

#menu {
    width: 980px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 50px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    width: 130px;
    height: 30px;
    margin-right: 1px;
    padding: 9px 0px 0px 0px;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    border: none;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
}

#menu .current_page_item a {
    padding-left: 0;
}

/* Page */

#page {
    width: 1000px;
    margin: 0 auto;
    background: url(images/img004.png) repeat-y left top;
    padding: 0px;
}

#page-bgtop {
    background: url(images/img003.png) no-repeat left top;
}

#page-bgbtm {
    background: url(images/img005.png) no-repeat left bottom;
}

/* Content */

#content {
    float: right;
    width: 620px;
    padding: 20px 10px 0px 0px;
}

.post {
    border-bottom: 1px dotted #E7E2DC;
}

.post .title {
    letter-spacing: -.5px;
    padding: 20px 10px 0px 30px;
    font-size: 30px;
}

.post .title a {
    color: #3E3530;
    border: none;
}

.post .meta {
    margin-bottom: 30px;
    padding: 0px 30px 0px 30px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
}

.post .meta .date {
    float: left;
}

.post .meta .posted {
    float: right;
}

.post .meta a {
}

.post .entry {
    padding: 0px 30px 20px 30px;
    padding-bottom: 20px;
    text-align: justify;
}

.links {
    padding-top: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* Sidebar */

#sidebar {
    float: left;
    width: 370px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #787878;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar li ul {
    margin: 0px 0px;
    padding-left: 25px;
    padding-bottom: 30px;
}

#sidebar li li {
    line-height: 30px;
    margin: 0px 30px;
    padding: 0px 0px 0px 15px;
    border-left: none;
    background: url(images/img07.jpg) no-repeat left 12px;
}

#sidebar li li span {
    display: block;
    margin-top: -20px;
    padding: 0;
    font-size: 11px;
    font-style: italic;
}

#sidebar h2 {
    height: 46px;
    padding-top: 13px;
    padding-left: 50px;
    margin-bottom: 10px;
    background: url(images/img06.jpg) no-repeat left 4px;
    letter-spacing: -.5px;
    font-size: 1.8em;
    color: #696969;
}

#sidebar p {
    margin-left: 20px;
    padding: 0px 30px 20px 50px;
    text-align: justify;
}

#sidebar a {
    border: none;
    color: #4D4D4D;
}

#sidebar a:hover {
    text-decoration: underline;
    color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 20px;
}

#calendar table {
    width: 100%;
}

#calendar tbody td {
    text-align: center;
}

#calendar #next {
    text-align: right;
}

/* Footer */

#footer {
    height: 50px;
    margin: 0 auto;
    padding: 0px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
}

#footer p {
    margin: 0;
    padding-top: 20px;
    line-height: normal;
    font-size: 9px;
    text-align: center;
    color: #A0A0A0;
}

#footer a {
    color: #8A8A8A;
}

Html:

Spoiler tonen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>EwanOomen.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
    <div id="header-wrapper">
    <div id="header">
        <div id="logo">
            <h1><tt>EwanOomen</tt></h1>
            <p></p>
        </div>
    </div>
    </div>
    <!-- end #header -->
    <div id="page">
    <div id="page-bgtop">
    <div id="page-bgbtm">
        <div id="content">
            <div class="post">
                <h2 class="title">Welkom</h2>
                <p class="meta"><span class="date">00-00-0000</span><span class="posted">Gepost door: ****</span></p>
                <div style="clear: both;">&nbsp;</div>
                <div class="entry">
                    <p>Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br />Tekst<br /></p>
                    <p></p>
                    <p class="links"><a href="#">Lees Meer</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Reacties</a></p>
                </div>
            </div>
            
        <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
            <ul>
                <li>
                    <div id="search" >
                    <form method="get" action="#">
                        <div>
                            <center><a href="http://www.twitter.com/" title=Twitter ><img src="images/twitter-logo.png" width=200px ></a><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: profile,
  rpp: 5,
  interval: 5000,
  width: 350,
  height: 300,
  theme: {
    shell: {
      background: #FFFFFF,
      color: #000000
    },
    tweets: {
      background: #FFFFFF,
      color: #000000,
      links: #000000
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: all
  }
}).render().setUser(Ewan_NL).start();
</script>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="Ewan_NL">Tweets</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<br />
<br />
<a href="http://www.hyves.nl/" title=Hyves ><img src="images/hyves-logo.png" width=200px /><a href="http://www.facebook.com/" title=Facebook ><img src="images/facebook-logo.jpg" width=200px /></a><img src="images/facebook-profiel.png" /><iframe src="http://www.facebook.com/plugins/like.php?href=www.EwanOomen.nl&amp;layout=button_count&amp;show_faces=true&amp;width=110&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe
</center>
                        </div>
                    </form>
                    </div>
                    <div style="clear: both;">&nbsp;</div>
                </li>
                <li>
                    <h3></h3>
                    <p></p>
                </li>
            </div>
        <!-- end #sidebar -->
        <div style="clear: both;">&nbsp;</div>
    </div>
    </div>
    </div>
    <!-- end #page -->
</div>
    <div id="footer">
        <p>&copy; Copyright 2010 - 2011 | EwanOomen.nl | All Rights Reserved</p>
    </div>
    <!-- end #footer -->
</body>
</html>

De header moet worden afgesloten door: www.ewanoomen.nl/layout/images/img0005.png

Alvast bedankt!

Greetz,
Ewan

Shahiem

Lid

Berichten: 20.364
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 9 aug 2020

27 feb 2011, 20:46

Bij de header moet je wel de werkelijke hoogte en breedte aangeven.

Eleky

Lid

Berichten: 3.788
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 12 jun 2025

27 feb 2011, 20:48

Geef de header een vaste width mee:

#header {
width: 1000px;
height: auto;
margin: 0 auto;
padding: 0px 0px 0px 30px;
background: url(images/img0004.png) repeat-y;

}

dan staat ie in het midden

Ewan

Lid · Topicstarter