✔ vertikale Linie

S

socke999

Erfahrenes Mitglied
Gibt es eine möglichkeit eine Verticale Linie zu machen,
so ca. wie <hr>, nur eben vertikal.
ich hab mir das gedacht eventuel mit einer DIV das zu machen:

Code: 
.verticalSpacer
{
	margin-left:2px;
	margin-righ:2px;
	border-left:1px #009 dotted;
	float:left;
	width:1px;
}

also dass so eine punktierte vertikale trennlinie entsteht.
Aber, dass problem dass ich nun habe, ich weis nicht genau die height vom oberen Element, wo sich die Trennlinie befindet, da dieser inhalt dynamich mit PHP generiert wird.

Also im Klartext:
HTML: 
<div id="Container">
     <div style="float:left;" id="inhalt1" style>DYNAMISCHER CONTENT, höhe unbekannt</div>

    <div class="verticalSpacer"></div>
   
 <div  style="float:left;" id="inhalt2"> anderer dynamischer inhalt</div>
   
    <div class="verticalSpacer"></div>

    <div  style="float:left;" id="inhalt3"> weiterer dynamischer inhalt</div>

</div>

Oder weis sonst jemand wie man das am besten lösen könnte?
 
Zuletzt bearbeitet:
Hi,

der Knackpunkt hierbei ist, dass die umfliessenden Blöcke keinen Bezug zueinander haben.

Von daher ist dieses "Konstrukt" auf diese Weise nicht ohne weiteres realisierbar.

mfg Maik
 
Maik hat gesagt.:
Du kannst es ja mal mit Equal Height Columns - revisited versuchen.
Zum Vergrößern anklicken....
Bingo :)

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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example - In search of the One True Layout - Equal Height Columns</title>
<style type="text/css">
/* <![CDATA[ */
#block_1
        {
        float: left;
        width: 34%;
        margin-left: 33%;
        border-right:1px #009 dotted;
        }
* html #block_1
        {
        display: inline;
        }
#block_2
        {
        float: left;
        width: 33%;
        margin-left: -67%;
        border-right:1px #009 dotted;
        }
#block_3
        {
        float: left;
        width: 33%;
        }
/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
        {
        padding-bottom: 32767px !important;
        margin-bottom: -32767px !important;
        }
/* End Mac IE5 filter */
#wrapper
        {
        overflow: hidden; /* This hides the excess padding in non-IE browsers */
        }
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute
weirdness as the method is enhanced */
#wrapper
        {
/* Normally a Holly-style hack height: 1% would suffice but that causes
IE 5.01 to completely collapse the wrapper - instead we float it */
        float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes
(I saw it happen many moons ago) makes the width of wrapper too small
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here
just in case that many moons ago problem rears its head again */
        float/**/: none;
        }
/* easy clearing */
#wrapper:after
        {
        content: '[DO NOT LEAVE IT IS NOT REAL]';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
#wrapper
        {
        display: inline-block;
        }
/*\*/
#wrapper
        {
        display: block;
        }
/* end easy clearing */
#footer
        {
        clear: both;
        }
/* Safari needs this - otherwise the ghost overflow, though painted
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
        {
        position: relative;
        z-index: 1000;
        }
/* ]]> */
</style>
<style type="text/css">
@import url(onetruelayout3.css);
</style>
</head>
<body>
<div id="header">
<h1>Equal Height Columns</h1>
</div>
<div id="wrapper">
<div id="block_1">
<h2>Block 1</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_2">
<h2>Block 2</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_3">
<h2>Block 3</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
</div><!-- close div#wrapper -->
</body>
</html>

Quelle: http://www.positioniseverything.net/articles/onetruelayout/example/equalheight

mfg Maik
 
Ah, danke, mal gucken, im prinzip kann ichs so übernehmen, allerdings könnt ich auch TABLE verwenden, man muss ja nicht alles unbedingt verkomplizieren und das rad neu erfinden wenns schon so was gibt.

Jedenfalls vielen DANK!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück