Hallo,
erst mal, ich bin neu :)
und dann habe ich auch schon ein Problem. Mein größtes Problem ist wohl, dass ich versuche ein Wordpress-Theme zu erstellen und in Wirklichkeit kaum Ahnung habe von CSS, HTML & Co ;)
Na, wie auch immer, ich hoffe ihr könnt mir trotzdem weiter helfen.
Ich habe folgenden Header:
und dazu gehörige CSS sieht so aus:
jetzt möchte ich aber, dass die header-bar die ganze Seitenbreite einnimmt, während der header nur so breit ist, wie die page. Das glaub ich hab ich hingekriegt. So jetzt soll aber auch noch beides gleich hoch sein. Wenn ich für beides die selbe %-Zahl eingebe funktioniert das schon mal nicht. Mit (z.B.) 100px funktioniert es einwandfrei! (line-height in den entsprechenden Zeilen ebenfalls auf 100px gesetzt). Da ich aber gerade an der responsiveness arbeite, "muss" ich ja alles in % angeben. (Hab ich das so richtig verstanden?)
Wäre sehr nett, wenn ihr mir helfen könntet und das in für einen Noob verständliche Worte fassen könntet!
Danke schon mal!
LG
die_biny
erst mal, ich bin neu :)
und dann habe ich auch schon ein Problem. Mein größtes Problem ist wohl, dass ich versuche ein Wordpress-Theme zu erstellen und in Wirklichkeit kaum Ahnung habe von CSS, HTML & Co ;)
Na, wie auch immer, ich hoffe ihr könnt mir trotzdem weiter helfen.
Ich habe folgenden Header:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"
rel="stylesheet" type="text/css" />
<link rel="pingback" href="<?php bloginfo('wpurl'); ?>/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml"
title="RSS-Feed" href="<?php bloginfo('wpurl'); ?>/feed/" />
<?php wp_head(); ?>
</head>
<body>
<div id="header-bar">
</div>
<div id="page">
<header role="banner">
<a href="<?php bloginfo('url'); ?>">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg"
alt="Logo" /></a>
<span><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span>
<nav role="navigation">
<?php if (!function_exists('dynamic_sidebar') ||
dynamic_sidebar('Menu') ) : ?>
<?php endif; ?>
</nav>
</header>
<main role="main">
<div id="banner">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner.jpg" width="90%" height="auto"
alt="Banner" />
</div>
<div id="content">und dazu gehörige CSS sieht so aus:
Code:
#header-bar {
background: #f7a786;
position: absolute;
left: 0;
width: 100%;
height: 12%;
top: auto;
}
#page {
position: relative;
width: 90%;
height: auto;
margin: 0 auto;
}
header {
background: #f7a786;
color: #FFFFFF;
width: 100%;
}
header img {
margin: 13px 20px 0 20px;
float: left;
width: auto;
height: 100%;
}
header span {
float: left;
line-height: 5.5em;
font-size: 1.35em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
float: right;
top: auto;
line-height: 5.5em;
margin: 0 20px 0 0;
}jetzt möchte ich aber, dass die header-bar die ganze Seitenbreite einnimmt, während der header nur so breit ist, wie die page. Das glaub ich hab ich hingekriegt. So jetzt soll aber auch noch beides gleich hoch sein. Wenn ich für beides die selbe %-Zahl eingebe funktioniert das schon mal nicht. Mit (z.B.) 100px funktioniert es einwandfrei! (line-height in den entsprechenden Zeilen ebenfalls auf 100px gesetzt). Da ich aber gerade an der responsiveness arbeite, "muss" ich ja alles in % angeben. (Hab ich das so richtig verstanden?)
Wäre sehr nett, wenn ihr mir helfen könntet und das in für einen Noob verständliche Worte fassen könntet!
Danke schon mal!
LG
die_biny
