Antworten auf deine Fragen:
Neues Thema erstellen

flexibele breite mit float:left

CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

Hallo allerseits,

Ich hoffe ich kann hier mein Problem gut genug schildern das ihr es versteht.

Ich bastel gerade ein Design das zurzeit so aussieht:


(Da ist für meine Firma ist hab Ich Logo und Namen entfernt)

Ich möchte nun eine Sidebar rechts neben der content box programmieren...

Hab ich gemacht sieht nun so aus:



Folgende zwei Sachen die ich aber gerne hätte.
1. Soll die content box...

HTML: 
div#content-main {
    margin:10px 5px 15px 5px;
    width:auto;
    float:left;
}

div#sidebar {
    margin:10px 5px 15px 5px;
    float:right;
    width:280px;
}
die breite voll ausnutzen die sie hat und nicht an den Box inhalt anpassen,
sodass zwischen der contentbox und der sidebar ein geringerer abstand ist.
Normalerweise macht das die contentbox aber sobald ich float:left einbaue
nicht mehr.

Gleichzeitig möchte ich aber auch, dadurch das die contentbox automisch ihre
volle mögliche breite nutzt, das wenn ich die sidebar div rausnehme die contentbox
über die volle breite wieder geht wie im ersten bild.

Meine Frage... wie realisiere ich das? Hoffe ich konnte mich einigermaßen verständlich
ausdrücken. Auch bei der Titelfindung für den Thread hab ich mich schwer getan
sorry dafür.

MfG und danke schonmal.
 
Zuletzt bearbeitet:

G

Gack81

Noch nicht viel geschrieben

AW: flexibele breite mit float:left

Guten Morgen ,


erst mal solltest du wissen das XHTML/CSS keine Programmier- Sprache ist.
XHTML/CSS schreibt man.


Probiere es einfach mal mit einen ungefähren wert nicht px sondern eine Prozentangabe im width.
Somit würde deine Box immer den Prozentsatz den du angibst haben
 
CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

AW: flexibele breite mit float:left

Es gibt immer noch genug Leute die sich darüber streiten ob das als
Programmiersprache durchgeht oder nicht. Im Grunde hast du
aber eig recht nur aus gewohntheit sag ich es halt.

Zu den Prozentangaben:

Ist nicht ganz wie ich mir das vorstelle. Dazu kommt das die die
sidebar nicht beachtet wird. Ich möchte das sagen wir mal die contentbox
95% ihrer verfügbaren breite nutzt. Doch die sidebar begrenzt diese
verfügbare breite nicht dadurch das sie da ist. Sie wird einfach
nach unten verschoben.

Aber ich möchte ja das die contentbox ihre volle breite nutzt.
Wenn das sidebar div da ist die die volle breite weniger als wenn
sie nicht da ist. Zumindest stell ich mir das gerade so vor :motz:

Hoffe das geht irgendwie sonst muss cih mir eine umständlichere Methode
ausdenken.



Vielleicht erkläre ich auch kurz wieso das ganze.
Ich möchte später ein kleines cms darauf aufbauen. Wenn der Admin
gesagt hat die entsprechende seite hat eine Sidebar wird sie eingebaut
wenn nicht wird das div garnicht erst geschrieben und die contentbox
übernimmt auch noch diesen Platz.
 
G

Gack81

Noch nicht viel geschrieben

AW: flexibele breite mit float:left

Es gibt immer noch genug Leute die sich darüber streiten ob das als
Programmiersprache durchgeht oder nicht. Im Grunde hast du
aber eig recht nur aus gewohntheit sag ich es halt.
Zum Vergrößern anklicken....

Mich schreckt es ab wenn ich bei diversen Agenturen lese das XHTML/CSS Programmiert wird,
genauso wie Firmenhomepage so mal es Website heißen müsste.

Zu deinem Anliegen:
Könntest du den HTML code mal dazu posten?
 
CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

AW: flexibele breite mit float:left

footer hab ich gelehrt wegen Firma etc

html:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="language" content="deutsch, de">
<meta name="date" content="[Datum/Uhrzeit]">
<meta name="expires" content="0">
<meta http-equiv="imagetoolbar" content="false">

<!-- InstanceBeginEditable name="doctitle" -->
<title>Dienstleistung Intranet</title>
<!-- InstanceEndEditable -->

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="css/boxen.css" rel="stylesheet" type="text/css" media="screen"/>

<!--[if IE]>


 <style type="text/css" media="screen">
      @import "css/style_ie.css";
</style>

<![endif]-->

<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->

</head>

<body>

<div id="container">

<div id="header">
      <h1 class="branding"><a href="index.php" title="Dienstleistung Intranet"><img src="http://www.psd-tutorials.de/modules/Forum/images/branding.png" alt="Dienstleistung Intranet" /></a></h1>
   
   <ul id="navigation-sub">
    <li><a href="#" title="Startseite">Startseite</a></li>
    <li><b>|</b></li>
    <li><a href="#" title="Dienstleistungen">Dienstleistungen</a></li>
    <li><b>|</b></li>
    <li><a href="#" title="Nachrichten">Nachrichten</a></li>
    <li><b>|</b></li>
    <li><a href="#" title="Wegweiser">Wegweiser</a></li>
   </ul>
  </div>
  
  <div class="clear"></div>
  <p class="hr"></p>
  <div class="clear"></div>
   
  <ul id="navigation-main">
   <li><a href="#" title="Link 01">Link 01</a>
       <ul>
        <li><a href="#" title="Sublink 01">Sublink 01</a></li>
     <li><a href="#" title="Sublink 02">Sublink 02</a></li>
     <li><a href="#" title="Sublink 03">Sublink 03</a></li>
     <li><a href="#" title="Sublink 04">Sublink 04</a></li>
    </ul>
   </li>
   <li><a href="#" title="Link 02">Link 02</a>
       <ul>
        <li><a href="#" title="Sublink 01">Sublink 01</a></li>
     <li><a href="#" title="Sublink 02">Sublink 02</a></li>
     <li><a href="#" title="Sublink 03">Sublink 03</a></li>
     <li><a href="#" title="Sublink 04">Sublink 04</a></li>
    </ul>
   </li>
   <li><a href="#" title="Link 03">Link 03</a>
       <ul>
        <li><a href="#" title="Sublink 01">Sublink 01</a></li>
     <li><a href="#" title="Sublink 02">Sublink 02</a></li>
     <li><a href="#" title="Sublink 03">Sublink 03</a></li>
     <li><a href="#" title="Sublink 04">Sublink 04</a></li>
    </ul>
   </li>
   <li><a href="#" title="Link 04">Link 04</a>
       <ul>
        <li><a href="#" title="Sublink 01">Sublink 01</a></li>
     <li><a href="#" title="Sublink 02">Sublink 02</a></li>
     <li><a href="#" title="Sublink 03">Sublink 03</a></li>
     <li><a href="#" title="Sublink 04">Sublink 04</a></li>
    </ul>
   </li>
   <li><a href="#" title="Link 05">Link 05</a>
       <ul>
        <li><a href="#" title="Sublink 01">Sublink 01</a></li>
     <li><a href="#" title="Sublink 02">Sublink 02</a></li>
     <li><a href="#" title="Sublink 03">Sublink 03</a></li>
     <li><a href="#" title="Sublink 04">Sublink 04</a></li>
    </ul>
   </li>
  </ul>    
  
  <div class="clear"></div>
  
  <div id="content">
  <div id="content-main">
    
    <div class="inseteck">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
    </div>
    
    <div class="inset">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    
    <h2>Dienstleistungen</h2>
    <h3 id="zitat">"Bei uns steht die Dienstleistung für Organisation, Mensch und Gebäude im Vordergrund."</h3>
    <p>
    Unser Ziel ist die Beratung unserer Kunden zur optimalen Erfüllung Ihrer <br>
    Anforderungen unter Beachtung bedarfsgerechter und kostenoptimierter 
    <br>Vorgaben
    <br><br>
    Unterstützt werden wir dabei von unseren Werkstätten, die in den <br>
    Fachlichkeiten Holz, Metall, Textil/Leder/Gravur und Siebdruck auch <br>
    Dienstleistungen in und um unseren Gebäuden erbringen. Zusätzlich geben <br>
    wir Support bei der Werksicherheit zur Vorhaltung instandgesetzter <br>
    Feuerlöscher und Atemschutzgeräte.
    <br><br>
    All dies gelingt wertschöpfend zu großen Anteilen mit Leichtarbeitsplätzen in <br>
    sozialer Verantwortung des Unternehmens für unsere Mitarbeiter.
    <br><br>
    Sie wollen schnelle Hilfe zu allen unseren Dienstleistungen? -> <a href="#">Servicestelle</a> 
    </p>
    
    
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
    </div>
    
    </div>
    
    <div id="sidebar">
    
    <div class="inset">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    gfhfgfdhdfh
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
    </div>    
    
    </div>
    </div>
 
    <div class="clear"></div>
    <p class="hr"></p>
    <div class="clear"></div>

    <div id="footer">  
    <p>
      
        </p>
    </div>

 </div>

</body>

<!-- InstanceEnd --></html>
css:

HTML: 
@charset "utf-8";

/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    
            >> IMPORT
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

    @import url("lightbox.css");
    @import url("clearfix.css");


/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    
            >> ALLGEMEINE EINSTELLUNGEN
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

* {
    margin:0;
    outline:none;
    padding:0;
}

body {
 background:#E8E8E8;
    color:#505367;
    font:12px/16px "Arial", Helvetica, sans-serif;
    line-height:1.2;
    overflow:-moz-scrollbars-vertical;
    text-align:center;
    vertical-align:baseline;
}

.clear {
   clear:left;
   float:none;
   height:0;
   line-height:0.0em
}


/*    :: TYPOGRAFIE
        -- -- -- -- -- -- -- -- -- -- -- --  */

p {
    margin:0 30px 16px 0px;
    text-align:justify;
}

p.column {
    margin:0 0 16px 0px;
    text-align:justify;
}

.zitat {
font-style:italic;
}

/*    :: ÜBERSCHRIFTEN
        -- -- -- -- -- -- -- -- -- -- -- --  */

h2 {
    color:#167BB3;
    font-size:18px;
    padding-left:10px;
}

h3 {
    font-size:11px;
    margin:2px 0 15px 10px;
    font-style:italic;
}


/*    :: LINKS
        -- -- -- -- -- -- -- -- -- -- -- --  */

a,
.escape span {
    color:#167bb3;
    text-decoration:none;
}

a:hover,
a:hover span {
    color:#004B7C;
    text-decoration:none;
}


/*    :: IMAGE
        -- -- -- -- -- -- -- -- -- -- -- --  */
        
img {
    border:none;
}


/*    :: LINIEN
        -- -- -- -- -- -- -- -- -- -- -- --  */

.hr {
    background:url(../images/p-hr.jpg) repeat-x top;
    height:2px;
  margin:5px 0px;
  width:1024px;
}


/*    :: ABSTÄNDE
        -- -- -- -- -- -- -- -- -- -- -- --  */



/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    
            >> POSITIONIERUNGEN
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
        
div#container {
   margin:0 auto;
   position:relative;
   text-align:left;
     width:1024px;
}


/*    :: HEADER
        -- -- -- -- -- -- -- -- -- -- -- --  */

div#header {
    margin:10px 0 0 0px;
}

#header h1.branding a {
    background:url(../images/branding.png);
    float:left;
    height:56px;
    text-indent:-9999px;
    width:193px;
}

        
/*    :: CONTENT
        -- -- -- -- -- -- -- -- -- -- -- --  */

div#content {
}
        
div#content-main {
    margin:10px 5px 15px 5px;
    width:auto;
    float:left;
}

div#container .column {
    float:left;
    text-align:justify;
    padding-right:30px;
    width:300px;
}


/*    :: SIDEBAR
        -- -- -- -- -- -- -- -- -- -- -- --  */
        
div#sidebar {
    margin:10px 5px 15px 5px;
    float:right;
    width:280px;
}


/*    :: FOOTER
        -- -- -- -- -- -- -- -- -- -- -- --  */

div#footer {
    margin:0 5px 0 5px;
    padding:0;
    position:relative;
    width:1024px;
    
    font-size:11px;
    color:#a5a5a5;
}


/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    
            >> MAIN-NAVIGATION
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
        
ul#navigation-main {
  font-size:14px;
  height:25px;
     list-style-type:none;
  margin:0;
  padding:0;
}

ul#navigation-main li {
  float:left;
  margin:0px;
  padding:0px;
}

ul#navigation-main li a {
color:#167BB3;
display:block;
line-height:25px;
padding:0 25px 0 0px;
text-decoration:none;
}

ul#navigation-main li a:hover,
ul#navigation-main ul li:hover a {
  color:#004B7C;
  text-decoration:none;
}

ul#navigation-main li ul {
  background:#E9E9E9;
  border-bottom:1px solid #C9C8C7;
        border-left:1px solid #C9C8C7;
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  position:absolute;
  width:150px;
  z-index:200;/*top:1em;
        /*left:0;*/
        }

ul#navigation-main li:hover ul {
  display:block;
}

ul#navigation-main li li {
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:150px;
}

ul#navigation-main li:hover li a {
  background:none;
}

ul#navigation-main li ul a {
  border-bottom:1px solid #C9C8C7;
        border-left:1px solid #C9C8C7;
  display:block;
  height:25px;
  font-size:12px;
  margin:0px;
  padding:0px 10px 0px 15px;
  text-align:left;
}

ul#navigation-main li ul a:hover,
ul#navigation-main li ul li:hover a {
  color:#004B7C;
  border-bottom:1px solid #C9C8C7;
        border-left:1px solid #C9C8C7;
  text-decoration:none;
}

ul#navigation-main p {
  clear:left;
}

/*    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -    
            >> SUB-NAVIGATION
        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
        
#header ul#navigation-sub {
    float:right;
    font-size:11px;
    list-style-type:none;
    margin:39px 0 0 0px;
}

#header ul#navigation-sub li {
    float:left;
    text-align:center;
}

#header ul#navigation-sub li a {
    color:#1C1C1C;
    display:block;
    padding:0 5px;
}

#header ul#navigation-sub li a:hover,
#header ul#navigation-sub li a.active {
    color:#167BB3;
    display:block;
}
 
Zuletzt bearbeitet:
F

fexx

Aktives Mitglied

AW: flexibele breite mit float:left

CrawlerSkiline schrieb:
Es gibt immer noch genug Leute die sich darüber streiten ob das als Programmiersprache durchgeht oder nicht.
Zum Vergrößern anklicken....

da gibt es nichts zu streiten, weil html eine markup sprache ist ... hypertext markup language :)



CrawlerSkiline schrieb:
Vielleicht erkläre ich auch kurz wieso das ganze.
Ich möchte später ein kleines cms darauf aufbauen. Wenn der Admin
gesagt hat die entsprechende seite hat eine Sidebar wird sie eingebaut
wenn nicht wird das div garnicht erst geschrieben und die contentbox
übernimmt auch noch diesen Platz.
Zum Vergrößern anklicken....
welches cms? vielleicht könnte man es darüber lösen?
 
CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

AW: flexibele breite mit float:left

ja genau soweit war ich auch schonmal ist aber auch nicht ganz
wie ich es möchte.

Jetzt nutzt die contentbox die komplette breite aus ignoriert aber
ob da eine sidebar ist oder nicht. Also liegt am ende die Sidebar
über der contentbox.

Ist halt jetzt genau wie in dem beispiel.

edit1:

da es doch irgendwie keine passende lösung gibt werde ich nun
einfach zwei ID erstellen und mit php per if sagen welche
verwendet werden soll.

Trotzdem vielen dank an euch für die hilfe :)
 
Zuletzt bearbeitet:
H

hubspe

display:schwarzgelb;

AW: flexibele breite mit float:left

gefloatete Elemente und flexible Breite das geht so nicht, weil es durch den Float zu einem ****** to-fit-Verhalten der Box kommt. ;)

kann mit mal jemand verraten warum das Wort s/h/r/i/n/k/ entfernt wird und durch Sternchen ersetzt wird??
Nach jedem Buchstaben einen Schrägstrich zu setzen ist a weng nervig. :rolleyes:
 
Zuletzt bearbeitet:
F

fexx

Aktives Mitglied

AW: flexibele breite mit float:left

was wie gesagt eine lösung wäre es über das cms zu lösen ... wenn sidebar vorhanden, dann gibt content eine neue klasse ...

// Edit: ich benutze zum beispiel bei einem projekt das 960er grid system und sage wenn die sidebar (grid_3) vorhanden ist, dann hat content nicht grid_12 als klasse sondern nur grid_9 ...
 
Zuletzt bearbeitet:
CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

AW: flexibele breite mit float:left

Ja ähnlich mach ich das jetzt auch. Nur die andere Lösung hätte ich
halt schöner gefunden.

Aber eine andere Frage noch vll könnt ihr mir da ja noch Helfen
bevor ich einen neuen Thread aufmache.

Die Contentbox kriegt keine Feste höhe. Das div wird also von der Höhe
immer größer jenachdem wieviel Inhalt dadrin ist.

Ich möchte das die Sidebar immer die selbe höhe hat wie die contentbox.
Jemand eine idee für mich?
 
CrawlerSkiline

CrawlerSkiline

Nicht mehr ganz neu hier

AW: flexibele breite mit float:left

Super vielen dank genau was ich suche.

Werd ich aber erst Montag ausprobieren habe jetzt erst einmal Feierabend.:D

Werd dann berichten ob es funktioniert hat wie ich es mir wünsche.
 
F

fexx

Aktives Mitglied

AW: flexibele breite mit float:left

hubspe schrieb:
equal height columns oder Companion Columns ist für Anfänger oder nicht so Erfahrene imho vollkommen ungeeignet, weil es nicht leicht zu verstehen ist.

Da gibt es doch wirkliches viel Einfacheres und auch sehr bewährtes:
Faux Columns oder für flexible Layouts Faux Columns Liquid
;)
Zum Vergrößern anklicken....

naja sooo schwer find ich das jetzt auch nicht ... du willst doch nur traffic für deinen blog :D :p
 
H

hubspe

display:schwarzgelb;

AW: flexibele breite mit float:left

fexx schrieb:
naja sooo schwer find ich das jetzt auch nicht
Zum Vergrößern anklicken....

ja, weil du schon viel weiter bist erscheint dir das nicht mehr schwer.


fexx schrieb:
du willst doch nur traffic für deinen blog :D :p
Zum Vergrößern anklicken....

naj, den Ehrgeiz einen Riesenblog zu bekommen hab ich eigentlich nicht so sehr.
Für Faux Columns gibt es noch mind. ein anderes gutes Tut, bei Faux Columns Liquid sieht die Sache schon anders aus. Da habe ich kein vergleichbares, deutschsprachiges Tut gefunden. :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 199 (Mitglieder: 8, Gäste: 191)
Robots: 572

Statistik des Forums

Themen
118.565
Beiträge
1.538.066
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben