zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Responsive webdesign: horizontales Menü mit angepasster Schriftgröße

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.09.2012, 13:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2012
Beiträge: 14
Spencer befindet sich auf einem aufstrebenden Ast
Standard Responsive webdesign: horizontales Menü mit angepasster Schriftgröße

Liebe ExpertInnen!

Ich verzweifle an der Suche nach einer Möglichkeit, dass mein horizontales Menü (work - about - links - home etc.) gleich wie das Logo(Bild) darüber ebenso schrumpft.
Dh habe das Logo mit fittext so eingebaut, dass es sich ganz der Bildschirmgröße anpasst, aber ich weiß nicht, wie ich es schaffe, dass die Menüpunkte nebeneinander bleiben und je nach Bildschirmgröße eine kleiner Schriftgröße haben.

Kann mir wer weiterhelfen?

Danke schon mal im Voraus!!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.09.2012, 15:49
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Etwas mehr Details, z.B. links oder Quelltext waere hilfreich. Im Moment ist das nur stumpfes Raten, da man ja nicht weiss, wie deine Positionierung der Elemente im CSS aussieht etc.


~Cheers
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.09.2012, 10:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.04.2012
Beiträge: 14
Spencer befindet sich auf einem aufstrebenden Ast
Standard

Hallo!

Danke fürs Antworten - hier die Details:

Html:

HTML-Code:
<!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" dir="ltr" lang="en-US" xml:lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>index gallery</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="pingback" href="http://www.code-2-reduction.fr/codiumextendpreview/xmlrpc.php" />
<link rel="shortcut icon" href="http://bon.code-2-reduction.fr/favicon.ico" />
<meta name="robots" content="noindex,nofollow" />
<link rel="alternate" type="application/rss+xml" title="codium extend » Feed" href="http://www.code-2-reduction.fr/codiumextendpreview/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="codium extend » Comments Feed" href="http://www.code-2-reduction.fr/codiumextendpreview/?feed=comments-rss2" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.code-2-reduction.fr/codiumextendpreview/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.code-2-reduction.fr/codiumextendpreview/wp-includes/wlwmanifest.xml" />
<link rel="index" title="codium extend" href="http://www.code-2-reduction.fr/codiumextendpreview" />
<meta name="generator" content="WordPress 3.1" />
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
                        #gallery-1 {
                                margin: auto;
                        }
                        #gallery-1 .gallery-item {
                                float: left;
                                margin-top: 10px;
                                text-align: center;
                                width: 33%;
                        }
                        #gallery-1 img {
                                border: 2px solid #cfcfcf;
                        }
                        #gallery-1 .gallery-caption {
                                margin-left: 0;
                        }
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 br.c2 {clear: both;}
 br.c1 {clear: both}
/*]]>*/
</style>
</head>
<body class="home blog divers tag-flickr tag-headcover tag-photo">
<div id="wrapperpub">
<div id="header">
<div class="dp100">
            <div id="responsive_headline">
            <a href="index"><img src="krisa.png" alt="krisa.com"/></a>
            </div>
<div id="submenu">
  <ul>
    <li><a href="index.html">work</a></li>
    <li><a href="gallery.html">about</a></li>
    <li><a href="about.html">links</a></li>
    <li><a href="contact.html">contact</a></li>
  </ul>
</div>
</div>
<!-- dp100 --></div>
<!--  #header --></div>
<!--  #wrapperpub -->
<div class="clear"></div>
<div id="wrapper">
<div class="clear"></div>
<div id="container">
<div id="content">
<div id="gallery-1" class="gallery galleryid-11105 gallery-columns-3 gallery-size-thumbnail">
<dl class="gallery-item">
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<br class="c1" />
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<br class="c1" />
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<dl class="gallery-item">
<dd><br /></dd>
<dt class="gallery-icon"><a href="work.htm"><img src="o nachtmahr9_2.jpg" class="attachment-thumbnail" alt="porte-clees" title="porte-clees" height="160" width="160" /></a></dt>
</dl>
<br class="c1" />
<br class="c2" />
<br /></div>
<!-- see gallery_shortcode() in wp-includes/media.php --></div>
<div class="center">
<div class="navigation mobileoff"></div>
<div class="navigation_mobile"></div>
</div>
</div>
<!-- #content --></div>
<!-- #container -->
<div class="clear"></div>
</body>
</html>


style.css:

Code:
*
{
	margin: 0;
	padding: 0;
}
body
{
	background-attachment: fixed;
	background-color: #6d6969;
	background-repeat: repeat-x;
	color: #333333;
	font: 62.5% Helvetica,Verdana,Arial,Sans-Serif;
}
blockquote
{
	border-left: 0.4em solid #eee;
	margin: 0 0 0 1.5em;
	padding: 0 0 0 1em;
}
abbr,acronym
{
	border-bottom: 1px dotted #666;
	cursor: help;
}
pre
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.7);
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	padding: 1.5em;
}
address
{
	background: transparent;
	border: 0;
	margin-bottom: 18px;
	padding: 0;
	vertical-align: baseline;
}
a
{
	color: #333333;
	text-decoration: none;
}
a:link
{
	color: #333333;
	text-decoration: none;
}
a:hover
{
	color: #999999;
	text-decoration: none;
}
a:visited
{
	color: #333333;
	text-decoration: none;
}
a:active
{
	color: #333333;
	text-decoration: none;
}
a:visited
{
	color: #FFFFFF;
	text-decoration: none;
}

#navigation ul li a:hover
{
	color: black;
	opacity: .25;
}
h1, h2, h3, h4
{
	font-family: Helvetica,Verdana,Arial,Sans-Serif;
}
h1
{
	font-family: Helvetica,Verdana,Arial,Sans-Serif;
	font-size: 4.5em;
}
h1.blogtitle
{
	font-family: 'PT+Sans&subset=latin', Helvetica,Verdana,Arial,Sans-Serif;
	font-size: 4em;
	margin: 0 0 30px 0;
}
h1 a
{
	color: #333333;
}
h1 a:hover
{
	background: transparent;
	color: #333333;
}
h1 a:link
{
	color: #333333;
}
h1 a:visited
{
	color: #333333;
}
h2 a,h3 a, h4 a
{
	color: #333333;
	font-weight: normal;
}
h2.entry-title
{
	color: #333333;
	font-size: 28px;
	font-weight: bold;
	margin: 0 0 0 0;
}
h2.single-entry-title
{
	color: #333333;
	font-size: 28px;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}
h2.page-title
{
	font-size: 28px;
	font-weight: bold !important;
	margin: 0 0 0.5em 0;
	text-align: center;
}
h3.widgettitle
{
	color: #333333;
	font-size: 1.5em !important;
}
.description
{
	color: #333333;
	font-family: 'PT+Sans&subset=latin', Helvetica,Verdana,Arial,Sans-Serif;
	font-size: 1.3em;
	margin: 0.5em 0 0 8px;
}
div#header
{
	background: transparent;
	height: 8em;
	margin: 7px 0 0 0;
	padding: 1em 1em 1em 1em;
}
div#headertop
{
	background-color: transparent;
	margin: 0 0 0 0;
}
#logo
{
	margin: -3.5em 0 0 -1em;
	padding: 0.3em 0.7em;
}
* html #logo
{
	margin: -2.5em 0 0 -1em;
	padding: 0.3em 0.7em;
}
#logo a
{
	background-color: transparent;
}
#access
{
	background: #6d6969;
	display: block;
	float: left;
	margin: 0 auto;
	text-transform: uppercase;
	width: 980px;
}
#access .menu-header,div.menu
{
	font-size: 1.3em;
	margin-left: 10px;
}
#access .menu-header ul,div.menu ul
{
	list-style: none;
	margin: 0;
}
#access .menu-header li,div.menu li
{
	float: left;
	position: relative;
}
#access a
{
	color: #333333;
	display: block;
	line-height: 40px;
	padding: 0 10px;
	text-decoration: none;
}
#access ul ul
{
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	left: 0;
	moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	position: absolute;
	top: 40px;
	webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	width: 180px;
	z-index: 99999;
}
#access ul ul li
{
	min-width: 180px;
}
#access ul ul ul
{
	left: 100%;
	top: 0;
}
#access ul ul a
{
	background: #f1f2f4;
	height: auto;
	line-height: 1em;
	padding: 10px;
	width: 160px;
}
#access li:hover > a,#access ul ul :hover > a
{
	background: #444;
	background: rgba(0,0,0,0.7);
	color: #fff;
	moz-transition: all 0.5s ease-in-out;
	o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	webkit-transition: all 0.5s ease-in-out;
}
#access ul li:hover > ul
{
	display: block;
}
#access ul li.current_page_item > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a,* html #access ul li.current_page_item a,* html #access ul li.current-menu-ancestor a,* html #access ul li.current-menu-item a,* html #access ul li.current-menu-parent a,* html #access ul li a:hover
{
	background: #444;
	background: rgba(0,0,0,0.7);
	color: #fff;
}
#wrapperpub
{
	background-color: transparent;
	margin: 0 auto;
	padding: 0 0 0 0;
	position: relative;
	text-align: center;
	width: 980px;
}
#wrapper
{
	background-color: #6d6969;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	margin: 0 auto;
	moz-border-radius-bottomleft: 6px;
	moz-border-radius-bottomright: 6px;
	position: relative;
	text-align: left;
	width: 800px;
}
#wrappertop
{
	background-color: transparent;
	margin: 0 auto;
	padding: 0 0 0 0;
	position: relative;
	text-align: left;
	width: 800px;
}
#submenu ul{
    	margin: 0; 
	padding: 0px 0px 100px 0px;
    	list-style: none;
    	color: #999999;
text-align:center;
font-family:'Arial Narrow','Trebuchet MS';
font-size:2em;
font-weight:bold;
letter-spacing:0.0em;
}
    
#submenu ul li{
    display: inline;
    }

#submenu ul li a {
    padding: 3px 30px;
    text-decoration: none;
    color: #333333;
    }

#submenu ul li a:hover {
    color: #999999;
    }
#container
{
	background-color: #6d6969;
	clear: both;
	display: inline;
	float: none;
	margin: 0 0 0 8px;
	padding: 2em 1em 1em 1em;
	width: 623px;
}
#containerlarge
{
	background-color: #6d6969;
	clear: both;
	display: inline;
	float: left;
	margin: 0.8em 0 2em 2em;
	width: 950px;
}
* html #containerlarge
{
	background-color: #6d6969;
	float: left;
	margin: 2em 0 2em 2em;
	width: 950px;
}
#content
{
	background-color: #6d6969;
	overflow: hidden;
	padding: 0 0 0 3px;
}
#content h1
{
	font-size: 2.7em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content h2
{
	font-size: 2.7em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content h3
{
	font-size: 1.8em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content h4
{
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content h5
{
	font-size: 1.3em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content h6
{
	font-size: 1.1em;
	font-weight: normal;
	letter-spacing: -0.05em;
	margin: 0 0 0.5em 0;
}
#content code
{
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 11px;
}
#responsive_headline img
{
	max-width: 100%;
	vertical-align: bottom;
	padding-bottom: 5%;
}
.navli
{
	padding-left: 6%;
}
p.instructions
{
	padding: 1% 0 2% 0;
	text-align: center;
}
#footer
{
	clear: both;
	color: #bbb;
	font-size: 1.1em;
	line-height: 1.5em;
	margin: auto width:980px;
	padding: 3em 0 0.5em 2em;
	text-align: left;
}
#footer a,#footerlink a
{
	color: #bbb;
	outline: none;
	text-decoration: none;
}
#footer a:hover,#footerlink a:hover
{
	background: #6d6969;
	color: #444;
	outline: 0;
	text-decoration: none;
}
#footer p,#footerlink p
{
	color: #bbb;
}
#footerlink
{
	clear: both;
	color: #bbb;
	font-size: 1.1em;
	line-height: 1em;
	margin-bottom: 2em;
	padding: 1em 0 1em 0;
	text-align: left;
	width: 980px;
}
div#primary
{
	clear: right;
}
* html #primary
{
	margin: 1em 1em 0 1em;
	width: 300px;
}
div#secondary
{
	clear: right;
}
* html #secondary
{
	margin: 1em 1em 0 1em;
}
.clear
{
	clear: both;
}
.hentry
{
	font-weight: normal;
	margin-bottom: 2em;
}
.entry-content
{
	color: #444;
	font: 1.3em/1.8em Helvetica,Arial,sans-serif;
	margin: auto;
	text-align: justify;
}
.entry-content p
{
	margin: 0 0 0.5em 0;
}
* html .entry-content p
{
	margin: 0em 0;
}
.entry-content ol
{
	margin: 0 0 0.5em 2em;
	padding: 0em 1em 1em 0em;
}
.entry-content ol li
{
	margin: 0 0 0.2em;
}
.entry-content ul
{
	margin: 0 0 0.5em 2em;
	padding: 0em 1em 1em 0em;
}
.entry-content ul li
{
	margin: 0 0 0.2em;
}
.entry-content pre
{
	margin: 0 0 .5em 2em;
	padding: 0em 1em 1em 0em;
}
.entry-content a
{
	background: #6d6969;
	color: #444;
}
.entry-content a:visited
{
	color: #0299FF;
}
.entry-content a:hover
{
	color: #0299FF;
}
.entry-content h2
{
	font-size: 1.8em !important;
}
.entry-content h3
{
	font-size: 1.5em !important;
}
.entry-content h4
{
	font-size: 1.3em !important;
}
.entry-content h5
{
	font-size: 1em !important;
}
.entry-content h6
{
	font-size: 0.9em !important;
}
.alignleft
{
	float: left;
}
.alignright
{
	float: right;
}
.center
{
	margin: 0 0 1.5em 0;
	text-align: center;
}
.entry-meta
{
	color: #bbb;
	font-size: 3.1em;
	line-height: 3.5em;
	padding: 0em;
}
.entry-meta .tag-links a
{
	background: #6d6969;
	color: #333333;
}
.entry-meta .tag-links a:hover
{
	background: #6d6969;
	color: #6d6969;
}
.sticky
{
	background-color: transparent;
}
.page-link
{
	clear: both;
	color: #000;
	font-weight: bold;
	margin: 0 0 22px 0;
	word-spacing: 0.5em;
}
.page-link a:link, 
.page-link a:visited
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.5);
	color: #444;
	font-weight: normal;
	padding: 0.5em 0.75em;
	text-decoration: none;
}
.page-link a
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.5);
	color: #444;
}
.page-link a:active, 
.page-link a:hover
{
	background: #6d6969;
	color: #0299FF;
	outline: 0;
	text-decoration: none;
}
.navigation
{
	height: 1em;
	margin: 0 0 2em;
	width: auto;
}
.navigation a
{
	color: #777;
}
.navigation a:hover
{
	text-decoration: none;
}
.nav-next
{
	float: right;
}
.nav-previous
{
	float: left;
}
.navigation_mobile
{
	display: none;
}
#comments .comment-body
{
	font-size: 1.2em;
	padding: 1em 0;
}
#comments .comment-body ul, 
#comments .comment-body li,
#comments .comment-body ol
{
	margin: 0 1em;
}
#comments .comment-body p:last-child
{
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child
{
	margin-bottom: 24px;
}
#comments li
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.5);
	margin: 1em 0;
	padding: 1em 1em;
}
#comments li.alt
{
	background-color: #F8F8F5;
	background-color: rgba(248, 248, 245, 0.9);
	margin: 1em 0;
	padding: 1em 1em;
}
#comments
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#comments .byuser
{
}
#comments .byuser.alt
{
}
#comments .bypostauthor
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.7);
}
#comments .bypostauthor.alt
{
	background-color: #FFF;
	background-color: rgba(255, 255, 255, 0.7);
}
#comments .comment p
{
}
#comments .comment-author
{
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: -0.1em;
	margin: 0 0 0 3px;
}
#comments .comment-meta a
{
	color: #777;
}
#comments .comment-meta
{
	color: #777;
	margin: 0.3em 0;
}
#comments .comment-author-admin
{
	background-color: #FFF;
	background-position: right top;
	background-repeat: no-repeat;
}
#comments ul.children
{
	list-style: none;
	margin: 0 0 0 2em;
}
#comments .count
{
	color: #606566;
	float: right;
	font-size: 20px;
	padding: 10px;
}
#comments .pingback
{
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback
{
	margin-top: -6px;
}
#comments .pingback p
{
	color: #888;
	display: block;
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url
{
	font-size: 13px;
	font-style: italic;
}
#comments .nocomments
{
	color: #bbb;
	font-size: 24px;
	font-weight: 100;
	margin: 26px 0;
	text-align: center;
}
div.formcontainer
{
	width: 100%;
}
#commentform .comment-form-author, .comment-form-email, .comment-form-url
{
	clear: both;
	color: #777;
	font: 1.3em Helvetica,Verdana,Arial,Sans-Serif;
	padding: 0.3em;
	width: 40%;
}
#commentform .comment-form-comment
{
	clear: both;
	color: #777;
	font: 1.3em Helvetica,Verdana,Arial,Sans-Serif;
	padding: 0.3em;
}
#commentform .comment-form-comment label
{
	background: #fff;
	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	color: #555;
	display: inline-block;
	font-size: 13px;
	left: 4px;
	min-width: 60px;
	moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	padding: 4px 10px;
	webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
}
#commentform #comment-notes
{
	color: #bbb;
	margin: 1em 0 0 0;
}
#commentform #submit
{
	float: right;
	margin: 0.5em 0;
	width: auto;
}
#commentform label
{
	color: #777;
	font: 1.1em Helvetica,Arial,sans-serif;
	margin: 1em 0;
	padding: 1em 1em;
}
#commentform textarea#comment
{
	color: #777;
	font: 1.1em Helvetica,Arial,sans-serif;
	height: 15em;
	padding: 0.3em 0 0.3em 0.3em;
	width: 99%;
}
#commentform .form-allowed-tags
{
	line-height: 1em;
}
#commentform .form-allowed-tags
{
	color: #888;
	font-size: 12px;
	line-height: 18px;
}
#commentform .form-allowed-tags code
{
	font-size: 11px;
}
#commentform .required
{
	color: #ff4b33;
	font-weight: bold;
}
#commentform .comments-navigation
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	margin: 1em 0;
}
#commentform .page-numbers.current
{
	text-decoration: underline;
}
.comments-navigation
{
	clear: both;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 22px 0;
	margin: 1em 0;
	word-spacing: 0.5em;
}
.comments-navigation a
{
	background: #6d6969;
	color: #0299FF;
	outline: 0;
	padding: 5px 7px;
	text-decoration: none;
}
.comments-navigation a:active
{
	color: #0299FF;
	outline: 0;
	text-decoration: none;
}
.comments-navigation a:hover
{
	background: #444;
	color: #FFF;
	outline: 0;
	text-decoration: none;
}
.four04 #content p
{
	font-size: 1.2em;
}
.four04 .sidebar
{
	clear: right;
	display: block;
}
.four04 #content
{
	text-align: left;
	width: 590px;
}
.widget
{
}
.widgetblock
{
	background: transparent;
	font-size: 1.2em;
	margin: 0 0 0.5em 0;
	padding: 0.5em 0 0 0;
}
.widgettitleb
{
	border-bottom: 2px solid #f1f2f4;
	color: #444;
	margin: 0 0 0.5em 0;
	padding: 0.5em 0 0.5em 0;
}
.screen-reader-text
{
	display: none;
}
.entry-date
{
	color: #bbb;
	margin: -1em 0 0.5em 0;
}
.gallery
{
	margin: 0 auto 18px;
}
.gallery .gallery-item
{
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item
{
	width: 50%;
}
.gallery-columns-4 .gallery-item
{
	width: 25%;
}
.gallery img
{
	border: 2px solid #cfcfcf;
}
.gallery-columns-2 .attachment-medium
{
	height: auto;
	max-width: 92%;
}
.gallery-columns-4 .attachment-thumbnail
{
	height: auto;
	max-width: 84%;
}
.gallery .gallery-caption
{
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl
{
	margin: 0;
}
.gallery img
{
	border: 10px solid #f1f1f1;
}
.gallery br+br
{
	display: none;
}
.linebreak
{
	border-top: 2px solid #f1f2f4;
	padding: 1em 0 0.5em 0;
}
.linebreaktop
{
	float: right;
	font-size: 0.8em;
}
img.avatar
{
	float: left;
	margin-right: 5px;
	padding: 0 0.5em 0 0;
}
#content .wp-caption
{
	background: #edebe0;
	line-height: 18px;
	margin-bottom: 20px;
	padding: 4px;
	text-align: center;
}
#content .wp-caption img
{
	margin: 5px 5px 0;
}
#content .wp-caption p.wp-caption-text
{
	color: #333333;
	font-size: 22px;
	margin: 5px;
}
#content .wp-caption p.wp-caption-text1
{
	color: #333333;
	font-size: 12px;
	margin: 5px;
}
#content .attachment img
{
	max-width: 620px;
}
#content .alignleft,#content img.alignleft
{
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
#content .alignright,#content img.alignright
{
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
#content .aligncenter,#content img.aligncenter
{
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#content img.alignleft,#content img.alignright,#content img.aligncenter
{
	margin-bottom: 12px;
}
#content .attachment img
{
	display: block;
	margin: 0 auto;
}
.dp5,.dp10,.dp20,.dp25,.dp30,.dp40,.dp50,.dp60,.dp70,.dp80,.dp100
{
	display: inline;
	float: left;
	margin-bottom: 0.5em;
	margin-left: -0.04em;
}
.dp5
{
	width: 5%;
}
.dp10
{
	width: 10%;
}
.dp20
{
	width: 20%;
}
.dp25
{
	width: 25%;
}
.dp30
{
	width: 30%;
}
.dp40
{
	width: 40%;
}
.dp50
{
	width: 50%;
}
.dp60
{
	width: 60%;
}
.dp70
{
	width: 70%;
}
.dp80
{
	width: 80%;
}
.dp100
{
	width: 100%;
}
.clear
{
	clear: both;
}
p
{
	color: #111;
	padding: 0em 1em 1em 0em;
}
.dp20 li
{
	margin: 0 0 0 1em;
}
#formbox label
{
	color: #444;
	display: block;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: 400;
	margin-bottom: 6px;
}
#formbox
{
	font-size: 12px;
	margin-right: 1px;
	padding: 16px 18px;
	position: relative;
}
#formbox .avatar
{
	border: 0;
	float: left;
	margin-top: 16px;
}
#formbox .avatar img
{
	border: 1px solid #ccc;
	padding: 0;
}
#formbox .inputarea
{
	font-size: 12px;
	height: 100%;
	padding-left: 66px;
}
#formbox textarea#posttext#posttitle
{
	background: #fafafa;
	border: 1px solid #d1d1d1;
	color: #666;
	font-size: 13px;
	margin-bottom: 10px;
	padding: 1%;
	width: 98%;
}
#wrapper form input[type="text"]
{
	background: #fafafa;
	border: 1px solid #d1d1d1;
	color: #666;
	font-size: 13px;
	line-height: 16px;
	padding: 5px 7px;
}
#sidebar form input[type="text"]
{
	background: #fff;
}
#formbox input#tags#display-name#m-address#home-page
{
	float: left;
	width: 75%;
}
#formbox input#submit
{
	float: right;
	margin-left: 6px;
	padding: 0 20px;
}
#formbox .postrow
{
	height: 28px;
}
#wrapper button,#wrapper input[type="submit"]
{
	background: #F2F2F2;
	border: 1px solid #ccc;
	border-radius: 3px;
	color: #333;
	font-size: 13px;
	font-weight: 700;
	height: 28px;
	line-height: 27px;
	margin-left: 10px;
	moz-border-radius: 3px;
	padding: 0 10px;
	text-shadow: 0 1px 0 #fff;
}
#wrapper button
{
	margin: 10px 10px 0 0;
}
#wrapper button:active,#wrapper input[type="submit"]:active
{
	background: #eee;
}
#search fieldset
{
	border: none;
	position: relative;
}
#search input[type="text"]
{
	border: 1px solid #CCCCCC;
	color: #516064;
	font-family: Helvetica,arial,sans-serif;
	font-size: 14px;
	margin-bottom: 20px;
	padding: 8px;
	text-indent: 0px;
	width: 275px;
}
#search label
{
	background: #dad8d8;
	border-radius: 3px;
	color: #FFFFFF;
	font-family: Helvetica,arial,sans-serif;
	font-size: 15px;
	font-weight: bold;
	moz-border-radius: 3px;
	padding: 4px 6px 2px 6px;
	position: absolute;
	right: 6px;
	top: 6px;
}
#search input.button
{
	background-color: transparent;
	background-position: 0 -27px;
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
	height: 27px;
	padding: 0;
	position: absolute;
	text-indent: -9999px;
	top: 3px;
}
#search input.button:hover
{
	background-position: 0 0px;
}
#search input.button
{
	background-position: 0 -27px;
}
input#searchsubmitbutton
{
	right: 10px;
	width: 100px;
}
span.cat-links a
{
	background: #444;
	border-radius: 3px;
	color: #FFF;
	line-height: 2em;
	moz-border-radius: 3px;
	padding: 4px 6px 4px 6px;
	text-transform: uppercase;
}
.postthumb
{
	float: left;
}
.postthumb-gallery
{
	float: left;
	height: 125px;
	width: 125px;
}
.postthumbimg-ds
{
	background: url('images/shadow.png') no-repeat bottom right;
	float: left;
	margin: 10px 2px 0 6px;
	padding: 0 0 0 0;
}
.postthumbimg-dsr
{
	background: url('images/shadow.png') no-repeat bottom right;
	float: right;
	margin: 10px 2px 0 6px;
	padding: 0 0 0 0;
}
.postthumbimg-ds img
{
	background-color: #fff;
	border: 1px solid #a9a9a9;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}
.postthumbimg-dsr img
{
	background-color: #fff;
	border: 1px solid #a9a9a9;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}
* html .postthumbimg
{
	margin: 0 0 0 0;
}
table
{
	border-collapse: collapse;
	margin: 0 0 0.5em 0;
}
th
{
	border-style: solid;
	border-width: 1px;
	font-size: 1.2em;
	padding: 4px 6px;
}
td
{
	border-style: solid;
	border-width: 1px;
	padding: 4px;
}
dl
{
	margin: 0 0 24px 0;
}
dt
{
	font-weight: bold;
}
dd
{
	margin-bottom: 18px;
}
.mobileon
{
	display: none;
}
@media screen and (min-width: 600px) and (max-width: 900px)
{
	body
	{
		background-image: none;
	}
	#wrapperpub
	{
		margin: 15px 4px -4px 4px;
		padding: 5px 10px;
		width: auto;
	}
	#wrapper
	{
		margin: 0 15px 15px 15px;
		width: auto;
	}
	#header
	{
		margin: 0 auto;
		width: auto;
	}
	#container
	{
		margin: 0 0 0 0;
		width: auto;
	}
	h1.blogtitle
	{
		margin: 0 0 0 0;
	}
	.description
	{
		margin: 0 0 0 0px;
	}
	#headertop,#access,.adsensehaut,#footer,#footerlink,.wp-pagenavi,.mobileoff,.sidebar
	{
		display: none;
	}
	.mobileon
	{
		width: auto;
	}
	.navigation_mobile
	{
		display: inline;
	}
	#logo img
	{
		height: auto;
		max-width: 500px;
		width: auto;
	}
	#logo
	{
		margin: 0 0 0 -1em;
	}
	#content img
	{
		height: auto;
		margin: 0;
		max-width: 500px;
		width: auto;
	}
	#content .attachment img
	{
		height: auto;
		margin: 0;
		max-width: 500px;
		width: auto;
	}
	#content .attachment-thumbnail
	{
		height: auto;
		margin: 0;
		max-width: 150px;
		width: auto;
	}
	#content img.attachment-thumbnail
	{
		height: auto;
		margin: 0;
		max-width: 150px;
		width: auto;
	}
	#content .wp-caption
	{
		max-width: 500px;
		width: auto;
	}
	#content .wp-caption img
	{
		max-width: 480px;
		width: auto;
	}
	#content .dp40 .postthumbimg-ds img
	{
		max-width: 150px;
		width: auto;
	}
	#accessmobile
	{
		background: #f1f2f4;
		display: block;
		float: left;
		margin: 0 auto;
		text-transform: uppercase;
		width: 100%;
	}
	#accessmobile .menu-header,div.menu
	{
		font-size: 1.3em;
		margin-left: 0px;
	}
	#accessmobile .menu-header ul,div.menu ul
	{
		list-style: none;
		margin: 0;
	}
	#accessmobile .menu-header li,div.menu li
	{
		float: left;
		position: relative;
		width: 100%;
	}
	#accessmobile a
	{
		color: #444;
		display: block;
		line-height: 40px;
		padding: 0 10px;
		text-decoration: none;
	}
	#accessmobile ul ul
	{
		box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		display: none;
		float: left;
		left: 0;
		moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		position: absolute;
		top: 40px;
		webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		width: 100%;
		z-index: 99999;
	}
	#accessmobile ul ul li
	{
		min-width: 100%;
	}
	#accessmobile ul ul ul
	{
		left: 100%;
		top: 0;
	}
	#accessmobile ul ul a
	{
		background: #f1f2f4;
		height: auto;
		line-height: 1em;
		padding: 10px 0 10px 10px;
	}
	#accessmobile li:hover > a,#accessmobile ul ul :hover > a
	{
		background: #444;
		background: rgba(0,0,0,0.7);
		color: #fff;
		moz-transition: all 0.5s ease-in-out;
		o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		webkit-transition: all 0.5s ease-in-out;
	}
	#accessmobile ul li:hover > ul
	{
		display: block;
	}
	#accessmobile ul li.current_page_item > a,#accessmobile ul li.current-menu-ancestor > a,#accessmobile ul li.current-menu-item > a,#accessmobile ul li.current-menu-parent > a,* html #accessmobile ul li.current_page_item a,* html #accessmobile ul li.current-menu-ancestor a,* html #accessmobile ul li.current-menu-item a,* html #accessmobile ul li.current-menu-parent a,* html #accessmobile ul li a:hover
	{
		background: #444;
		background: rgba(0,0,0,0.7);
		color: #fff;
	}
}
@media screen and (max-width: 600px),screen and (max-device-width: 480px)
{
	body
	{
		background-image: none;
	}
	#wrapperpub
	{
		margin: 15px 4px -4px 4px;
		padding: 5px 10px;
		width: auto;
	}
	#wrapper
	{
		margin: 0 15px 15px 15px;
		width: auto;
	}
	#header
	{
		margin: 0 auto;
		width: auto;
	}
	#container
	{
		margin: 0 0 0 0;
		width: auto;
	}
	h1.blogtitle
	{
		margin: 0 0 0 0px;
	}
	.description
	{
		margin: 0 0 0 0px;
	}
	#headertop,#access,.adsensehaut,#footer,#footerlink,.wp-pagenavi,.mobileoff,.sidebar
	{
		display: none;
	}
	.mobileon
	{
		width: auto;
	}
	.navigation_mobile
	{
		display: inline;
	}
	#logo img
	{
		height: auto;
		max-width: 300px;
		width: auto;
	}
	#logo
	{
		margin: 0 0 0 -1em;
	}
	#content img
	{
		height: auto;
		margin: 0;
		max-width: 250px;
		width: auto;
	}
	#content .attachment img
	{
		height: auto;
		margin: 0;
		max-width: 250px;
		width: auto;
	}
	#content .attachment-thumbnail
	{
		height: auto;
		margin: 0;
		max-width: 80px;
		width: auto;
	}
	#content img.attachment-thumbnail
	{
		height: auto;
		margin: 0;
		max-width: 80px;
		width: auto;
	}
	#content .wp-caption
	{
		max-width: 250px;
		width: auto;
	}
	#content .wp-caption img
	{
		max-width: 240px;
		width: auto;
	}
	#content .dp40 .postthumbimg-ds
	{
		max-width: 50px;
		width: auto;
	}
	#accessmobile
	{
		background: #f1f2f4;
		display: block;
		float: left;
		margin: 0 auto;
		text-transform: uppercase;
		width: 100%;
	}
	#accessmobile .menu-header,div.menu
	{
		font-size: 1.3em;
		margin-left: 0px;
	}
	#accessmobile .menu-header ul,div.menu ul
	{
		list-style: none;
		margin: 0;
	}
	#accessmobile .menu-header li,div.menu li
	{
		float: left;
		position: relative;
		width: 100%;
	}
	#accessmobile a
	{
		color: #444;
		display: block;
		line-height: 40px;
		padding: 0 10px;
		text-decoration: none;
	}
	#accessmobile ul ul
	{
		box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		display: none;
		float: left;
		left: 0;
		moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		position: absolute;
		top: 40px;
		webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		width: 100%;
		z-index: 99999;
	}
	#accessmobile ul ul li
	{
		min-width: 100%;
	}
	#accessmobile ul ul ul
	{
		left: 100%;
		top: 0;
	}
	#accessmobile ul ul a
	{
		background: #f1f2f4;
		height: auto;
		line-height: 1em;
		padding: 10px 0 10px 10px;
	}
	#accessmobile li:hover > a,#accessmobile ul ul :hover > a
	{
		background: #444;
		background: rgba(0,0,0,0.7);
		color: #fff;
		moz-transition: all 0.5s ease-in-out;
		o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		webkit-transition: all 0.5s ease-in-out;
	}
	#accessmobile ul li:hover > ul
	{
		display: block;
	}
	#accessmobile ul li.current_page_item > a,#accessmobile ul li.current-menu-ancestor > a,#accessmobile ul li.current-menu-item > a,#accessmobile ul li.current-menu-parent > a,* html #accessmobile ul li.current_page_item a,* html #accessmobile ul li.current-menu-ancestor a,* html #accessmobile ul li.current-menu-item a,* html #accessmobile ul li.current-menu-parent a,* html #accessmobile ul li a:hover
	{
		background: #444;
		background: rgba(0,0,0,0.7);
		color: #fff;
	}
}
Und mein Wunsch wäre eben, dass die horizontalen Menüpunkte in einer Reihe bleiben und sich der Bildschirmgröße mit einer kleiner werdenden Schriftgröße anpassen würden...

Danke!
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2012, 23:16
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

Hi,
Zitat:
Zitat von Mezzenstein Beitrag anzeigen
wenn du deine Schriftgrößen in Relation zum Viewport bringen möchtest solltest du die font-size in % bestimmen.
Eine Prozentangabe bei font-size bezieht sich nicht auf die Viewport- sonder auf die eingestellte Schriftgröße. Ist keine absolute Größe im CSS definiert, wird vom Browser-Defaultwert ausgegangen.

@TO
Ich kenne keine Möglichkeit deinen Wunsch mit CSS zu verwirklichen. Evtl. geht es mit JS.

Peter
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontales Menü centriert, Menühintergrund über ganze Seite PowerNerd CSS 19 05.05.2012 21:06
horizontales Menü in horizontales Pulldown-Menü ändern Stephan1958 CSS 5 11.01.2012 13:37
Darstellungsproblem flohpapa CSS 3 16.12.2009 08:55
horizontales Menü sarahg CSS 9 10.02.2009 14:25
horizontales Menü 2 Zeilen daniele1985 CSS 15 20.10.2006 13:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:17 Uhr.