(css) blockelemente ohne Absatz

Dieses Thema (css) blockelemente ohne Absatz im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von VinceWindel, 2. Okt. 2006.

Thema: (css) blockelemente ohne Absatz Hallo, ich mach' grad ne Homepage. Des öfteren benötige ich dabei: display: block; Dies erzeugt jedoch immer einen...

  1. Hallo,

    ich mach' grad ne Homepage.
    Des öfteren benötige ich dabei: display: block;
    Dies erzeugt jedoch immer einen Absatz. Wie kann ich das verhindern (außer mit->ner Tabelle)???

    Gruß,
    Vincent
     
  2. Code:
    <style type=text/css>
    a:link, a:visited {
    	display:block;
    	background-color:#CCCCCC;
    }
    a:hover {
    	background-color:#FF9900;
    }
    .block {
    	width:100px;
    	float:left;
    	text-align:center;
    }
    </style>
    
    <div class=block><a href=#>Test 1</a></div>
    <div class=block><a href=#>Test 2</a></div>
    <div class=block><a href=#>Test 3</a></div>
    <div class=block><a href=#>Test 4</a></div>
    
     
  3. Erstmal danke, funktioniert super! Nur tut sich dabei ein neues Problem auf.
    Ich mach damit ein dropdownmenü.
    Nur jetzt verschiebt mir der IE alle nachfolgenden divs nach unten sobald das Menü aufklappt.
    Der Firefox hingegen schiebt mir den Inhalt unter dem nächsten div durch.
    Soll nicht sein.
    Bin auf den z-index geschoben. Tatsächlich: der Firefox macht's nun richtig (position: relative).
    ABer der Internet Explorer verschiebt die folgende <div> wieder nach unten.
    :| ... ie

    Kann mir jemand weiterhelfen?

    Gruß, Vincent

    edit: auch der Firefox macht ein weniger großes Problem: er schiebt den INHALT der div(nicht die ganze div) zur Seite (nach rechts) - wie lässt sich das vermeiden?
     
  4. Wie währs mit nem Brocken Quelltext ;)

    Bei deiner nach oben, unten, rechts und links Verschieberei wird man ja ganz wirr im Kopf wenn man das so liest :2funny: :2funny:
     
  5. also das Menü hab ich von hier: http://www.homepage-total.de/javascript/hor_dhtml-menue.php -> schön übersuchtlich der Quelltext^^
    und dann so eingebaut:

    Code:
    <div id=leiste>
    
    <div class=bereich onMouseover=anzeigen('menue#1') onMouseout=anzeigen('menue#1')>
    <img src=Images/buttons/Bild2.png width=100 height=25>
    <span id=menue#1 style=display: none;>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    </span>
    </div>
    
    <div class=bereich onMouseover=anzeigen('menue#2') onMouseout=anzeigen('menue#2')>
    <img src=Images/buttons/Bild2.png width=100 height=25>
    <span id=menue#2 style=display: none;>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    </span>
    </div>
    
    <div class=bereich onMouseover=anzeigen('menue#3') onMouseout=anzeigen('menue#3')>
    <img src=Images/buttons/Bild2.png width=100 height=25>
    <span id=menue#3 style=display: none;>
    <a href= class=link>Demolink</a>
    <a href= class=link>Demolink</a>
    </span>
    </div>
    </div>
    <div id=maincontent>
    
     ... Weitere Code ...
    
    	</div>
    
    noch 2 Bilder wo die fehler zu sehen sind:
    http://vincewindel.vi.funpic.de/ie.jpg
    http://vincewindel.vi.funpic.de/ff.jpg

    hoffentlich is jetzt besser verständlich ;)

    Gruß, Vincent
     
  6. Code:
    <html>
    <head>
    <style type=text/css>
    body {
    	background-color:#000000;
    	padding:0px;
    	margin:0px;
    }
    #leiste {
    	position:absolute;
    	z-index:1000;
    }
    #main {
    	position:absolute;
    	z-index:100;
    	clear:both;
    	top:90px;
    	width:100%;
    }
    .bereich{
    display: block;
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    }
    
    a.link{
    display: block;
    color: #FFD700;
    font-family: Verdana, Arial;
    font-size: 13px;
    text-decoration: None;
    border-bottom: solid 1px #FFFFFF;
    }
    
    a.link.bereich{
    display: block;
    background-color: #000000;
    width: 100px;
    height: 25px;
    
    }
    
    a.link:hover{
    display: block;
    color: #000000;
    background-color: #FFD700;
    }
    h1 {
    	color:#FFFFFF;
    }
    </style>
    <script type='text/javascript'>
     function anzeigen(das){
     if(document.getElementById(das).style.display=='none') 
     document.getElementById(das).style.display='block'; 
     else document.getElementById(das).style.display='none';}
     </script>
    </head>
    <body>
    <div id=leiste>
     <div class=bereich onMouseover=anzeigen('menue#1') onMouseout=anzeigen('menue#1')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#1 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
     <div class=bereich onMouseover=anzeigen('menue#2') onMouseout=anzeigen('menue#2')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#2 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
     <div class=bereich onMouseover=anzeigen('menue#3') onMouseout=anzeigen('menue#3')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#3 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
    </div>
    <div id=main><h1>Weiterer Inhalt</h1></div>
    </body>
    </html>
    
     
  7. funktioniert super, danke! Aber es gibt immer noch ein Problem :|
    ich hab ja um meine komplette homepage eine art rahmen mit <div id=inhalt> gespannt.
    Da ich die Elemente ja nun mit position: absolute verwenden muss, schließt sich der inhalt-rahmen schon vor der buttonleiste.
    Zur veranschaulichung:
    Code:
    <body>
    <div id=inahlt>
    
    <div id=banner>bla</div><!-- relative-->
    <div class=leiste>/*menü*/</div><!--absolute - Ende des inahlt-rahmens -->
    
    <div id=main>
    bla bla text
    </div>
    
    </div>
    </body>
    
    Wie kann ich das Problem beheben?

    Gruß,
    Vincent
     
  8. z.B.

    Code:
    <html>
    <head>
    <style type=text/css>
    body {
    	background-color:#000000;
    	padding:0px;
    	margin:0px;
    }
    #leiste {
    	position:absolute;
    	z-index:1000;
    }
    #main {
    	z-index:100;
    	clear:both;
    	margin-top:90px;
    	width:100%;
    }
    .bereich{
    display: block;
    color: #FFFFFF;
    background-color: #000000;
    text-align: center;
    }
    
    a.link{
    display: block;
    color: #FFD700;
    font-family: Verdana, Arial;
    font-size: 13px;
    text-decoration: None;
    border-bottom: solid 1px #FFFFFF;
    }
    
    a.link.bereich{
    display: block;
    background-color: #000000;
    width: 100px;
    height: 25px;
    
    }
    
    a.link:hover{
    display: block;
    color: #000000;
    background-color: #FFD700;
    }
    h1 {
    	color:#990000;
    }
    #inhalt {
    	margin-top:100px;
    	margin-left:100px;
    	background-color:#FFFFCC;
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    </style>
    
    <script type='text/javascript'>
     function anzeigen(das){
     if(document.getElementById(das).style.display=='none') 
     document.getElementById(das).style.display='block'; 
     else document.getElementById(das).style.display='none';}
     </script>
    
    </head>
    <body>
    
    <div id=inhalt>
    	<div id=leiste>
    		<div class=bereich onMouseover=anzeigen('menue#1') onMouseout=anzeigen('menue#1')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#1 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
    		<div class=bereich onMouseover=anzeigen('menue#2') onMouseout=anzeigen('menue#2')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#2 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
    		<div class=bereich onMouseover=anzeigen('menue#3') onMouseout=anzeigen('menue#3')> <img src=Images/buttons/Bild2.png width=100 height=25> <span id=menue#3 style=display: none;> <a href= class=link>Demolink</a> <a href= class=link>Demolink</a> </span> </div>
    	</div>
    
    	<div id=main>
    		<h1>Weiterer Inhalt</h1>
    		Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt<br />
    	</div>
    
    </div>
    </body>
    </html>
    hab mal bewusst margin-top und margin-left auf 100px gesetzt damit du siehst das der Inhalt auch da ist wo er hingehört ;)
     
  9. Klappt alles wunderbar. Lediglich der IE hat probleme gemacht: der maincontent warunter der buttonleiste (weil die ja noch position: absolute war).
    Ich hab dann einfach einen dummy dazwischengeschoben:

    Code:
    #dummy {
     border: 1px;
     position: relative; 
     left: 50%;
     margin-left: -375px;
     width: 750px;
     height: 30px;
    }
    
    jetzt geht's in beiden Browsern!!! mml
    Danke vielmals für die Hilfe!!! :1 :1 :1
    echt tolle Leistung, conny... :) :)

    Grüßle
    Vincent
     
Die Seite wird geladen...

(css) blockelemente ohne Absatz - Ähnliche Themen

Forum Datum
Server mieten/bestellen (css) Windows 7 Forum 8. Juni 2010
DIV als PopUp mit Opacity-Eigenschaften & richtigen selektor (CSS) definieren Webentwicklung, Hosting & Programmierung 19. März 2013