Abstand entfernen (CSS)

Postpunker · 01.05.2012

Hallo,

habe diesmal eine Frage der Webentwicklung betreffend.

Ich habe mir ein Menü aufgezogen, nen Hover Effekt erstellt etc.

Was mich bei der ganzen Sache noch stört sind einfach die Abstände, die unerklärlicherweise zwischen den einzelnen Menüpunkten sind.

Habe als Grundlage das aktuelle HTML Boilerplate genommen.

Hoffe ihr könnt mir weiterhelfen.

Pixelaner · 01.05.2012

AW: Abstand entfernen (CSS)

Hi,

es wäre hilfreich wenn du uns den betreffenden Quelltext posten würdest.

mfg

Postpunker · 01.05.2012

AW: Abstand entfernen (CSS)

So, dass ist mein CSS Quelltext:

/* HTML5 Boilerplate */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not

root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/* Eigene Angaben */

body {
background-color: #EFEFEF;
margin: 0 auto;
}

/* Header Formatierung */
header {
height: 50px;
background-color: #ffea00;
margin-top: 0px;
/*Schatten*/
-moz-box-shadow: 0px 1px 3px 0px rgba(100,100,100,0.7);
-webkit-box-shadow: 0px 1px 3px 0px rgba(100,100,100,0.7);
box-shadow: 0px 1px 3px 0px rgba(100,100,100,0.7);
}

header ul {
position: absolute;
list-style-type: none;
padding-top: 15px;
}

header li{
display: inline;
color: #fff;
}
header a, header a:visited {
text-decoration: none;
color: #000;
padding-top: 30px;
padding-bottom:15px;
}

header nav ul li a:hover {
color: #fff;
background-color: #000
}

/* Ende Eigene Angaben */

@media only screen and (min-width: 35em) {

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}

Pixelaner · 01.05.2012

AW: Abstand entfernen (CSS)

Und wie schaut der Aufbau deiner Navi aus ? > HTML Quelltext ?

Postpunker · 01.05.2012

AW: Abstand entfernen (CSS)

Ok und noch mein HTML Quelltext:
Die Seiten heißen jetzt nur anders. Problem ist aber noch das Gleiche. ^^

<!doctype html>



 <html class="no-js" lang="en"> 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">

<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>

<header>
<nav>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="#">Basare</a></li>
<li><a href="#">Verkaufsinfos</a></li>
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Wir Über Uns</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<div role="main">

</div>
<footer>

</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="js/plugins.js"></script>
<script src="js/script.js"></script>

<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>

Pixelaner · 01.05.2012

AW: Abstand entfernen (CSS)

ich meine mich zu erinnern das das display:inline für den abstand sorgt..mache mal folgendes: vergib für die li`s und die a`s ein float:left...das bewirkt das selbe ohne lästige abstände. wichtig ist jedoch das auch die a`s ein float bekommen da sonst ein unerwünschter treppeneffekt in älteren browsern auftritt

Postpunker · 01.05.2012

AW: Abstand entfernen (CSS)

Vielen Dank. ^^

Hat mein Problem gelöst.

Top Sache!!!

Pixelaner · 01.05.2012

AW: Abstand entfernen (CSS)

ja bestens

viel spaß weiterhin