ilch.de :: Forum :: Allgemein :: HTML, PHP, SQL,...

ilch Forum » Allgemein » HTML, PHP, SQL,... » CSS Float

Gehe zu Seite:

Geschlossen

Mo. 29.02.2016 18:48 Uhr #1

MOODFOR Mitglied

Ich befasse mich grade mit HTML und CSS . Der einzige Stolperstein ist CSS Float . Soweit ich verstanden haben ist "Float" der Standart um unteranderem Division Container zu positionieren . Ich schreibe grade eine Seite . Dabei möchte ich auf der linke Seite den Content haben und auf der rechten Seite eine Navigation . Hiefür habe ich float:right; verwendet . Zurzeit auch korrekt dragestellt . Wenn ich jedoch dem #content eine Klasse ( class ) zuweise und dort den Innenabstand nutze, damit der Text dort auf schön mittig sitzt wird die #navigation_right unter den content geschoben . Außerdem verstehe ich nicht wie ich mit float zum beispiel den content mittig ausrichte und links und rechts eine navigation hinzufüge ?
Habe schon mehre Sachen zu float gelesen, aber da ist das echt komisch erklärt traurig

Würde mich über eine Erklärung freuen ! lächeln

#content {
float:left;
width: 700px;
min-height: 300px;
background-color: #232323;
}

#navigation_right {
float:right;
width: 200px;
min-height: 300px;
background-color: #262626;

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 18:53 Uhr #2

Nex4T Moderator

Schick mal ein Link zu deiner Seite

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 18:58 Uhr #3

SoX Mitglied

Würde mal sagen bloodline.eu/ , siehe Avatar ^^

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:00 Uhr #4

Nex4T Moderator

Naja wenn ich auf seine Seite gehe sieht für mich alles normal aus, deswegen glaube ich nichts das es sich dabei um die Aktuelle Seite handelt zwinker

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

1 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:01 Uhr #5

SoX Mitglied

Gut die habe ich jetzt nicht besucht SRY^^

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:04 Uhr #6

MOODFOR Mitglied

Danke die Seite ist nicht online lächeln

Hier der Code ;

@charset "utf-8";

body {
background-color: #232323;
background-image: url('images/background.jpg') ;
background-attachment:fixed;
background-position: 50% 0%;
background-repeat:no-repeat;
margin: 0 auto;padding: 0;
}

#homepage {
width: 900px;
margin: 0 auto;
margin-top:50px;
background-color: #232323;
}

#header {
width: 900px;
height: 150px;
background-color: #232323;
background-image: url('images/header.png');
}

#navigation {
width: 900px;
height: 30px;
background-image: url('images/background_navigation.png');
background-color: #000000;
}

#content {
float:left;
width: 700px;
min-height: 300px;
background-color: #232323;
}

#navigation_right {
float:right;
width: 200px;
min-height: 300px;
background-color: #262626;
}

#footer {
float:left;
background-color: #232323;
width: 900px;
height: 60px;
min-height: 60px;
}

.content_in {
float: left; 
width: 700px;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 5px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta name="author" content="L3GEND">
<link rel="stylesheet" href="layout.css" media="all" type="text/css">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
</head>
<body>
<div id="homepage">
<div id="header"></div>
<div id="navigation"></div>
<div id="content" class="content_in"></div>
<div id="navigation_right"></div>
<div id="footer"></div>
</div>
</body>
</html>

Zuletzt modifiziert von MOODFOR am 29.02.2016 - 19:08:10

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:10 Uhr #7

Nex4T Moderator

Und was genau soll das Problem dabei sein? ich hab Code testweise mal im Browser angeschaut aber sehe kein Fehler meines erachtens.

zum Float, wenn du Float:left machst setzt es solang deine gewünschten divs innerhalb eines Divs oder table immer links nebeneinander sprich wenn du erst die navi machst dann den content kommst du auf dein endergebniss das der Content mittig ist.

Nebenbei angemerkt würde ich die Navigation uund content mal in einem Holder setzen sprich z.b so

<div class="content-holder">
  <div class="left-navi"></div>
  <div class="content"></div>
  <div class="right-navi"></div>
</div>

Zuletzt modifiziert von Nex4T am 29.02.2016 - 19:12:42

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:26 Uhr #8

MOODFOR Mitglied

Okay danke lächeln

Also bei sieht das mit dem padding in der "content_in" class folgendermaßen aus ;

Zitat

zum Float, wenn du Float:left machst setzt es solang deine gewünschten divs innerhalb eines Divs oder table immer links nebeneinander sprich wenn du erst die navi machst dann den content kommst du auf dein endergebniss das der Content mittig ist.

Danke , also ist die Annordung der Divs wichtig ? lächeln

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:29 Uhr #9

Nex4T Moderator

hier ein bild aus deinem code wie ich ihn vor mir sehe, hab bei mir nur farben geändert um zu schauen wo was ist
www.directupload.net/file/d/4279/e59kf9rm_png

und ja div anordnung solte man schon beachten schau dir mal andere designs an

Zuletzt modifiziert von Nex4T am 29.02.2016 - 19:30:49

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

1 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:41 Uhr #10

MOODFOR Mitglied

Danke, ich habe den Code nachträglich noch geändert hatte "padding" in .content_in vergessen . Und genau , das scheint dazu zu führen , dass #navigation_right unter das Layout geschoben wird .

Hier der CSS Code ;

.content_in {
float: left; 
width: 700px;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 5px;
}

Der div container ;

<div id="content" class="content_in"></div>

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 19:58 Uhr #11

Wizzard26 Mitglied

Gesamtbreite der Seite 900px,
content 700px > Rechter Container 200px = 900px | alles ok ^^

content breite 700px >padding-left/right mit jeweils +8px
Macht daraus eine Contentbreite von 716px zwinker

Ist ein Typischer fehler, dass die padding und margins vergessen werden vom eigentlichen container wieder abzuziehen.

Sprich mit deinen momentanen padding werten darf dein Container nur eine width von max. 684px haben.
Hierzu am besten mal nach box-model goggeln und ein wenig einlesen.

Man kann dem auch entgegenwirken in dem du in deiner css

* {box-sizing: border-box;}
eingibst.

*stern ist ein Multiselektor und spricht alle elemente an, der befehl box-sizing: border-box hingegen hebelt das grundsätzliche box-model weitgehends aus, so das margin, padding sowie auch border sich nicht mehr auf die eigentliche container ausmaße auswirken.

HOffe das hilft dir ein wenig weiter

Greetz Wizz

1 Mitglieder finden den Beitrag gut.

zitieren

Mo. 29.02.2016 20:17 Uhr #12

Nex4T Moderator

Setz einfach in deinem content ein weiteren div und geb dem die class content_in und entferne Sie aus dem normalen content dann klappts

sprich so :

<div id="content" >
   <div class="content_in"></div>
</div>

Zuletzt modifiziert von Nex4T am 01.03.2016 - 13:04:39

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

1 Mitglieder finden den Beitrag gut.

zitieren

Mi. 02.03.2016 13:01 Uhr #13

MOODFOR Mitglied

Dankeschön hat funktioniert ! lächeln

Wie bekomme ich hin , dass sich #navigation_right der länge von #content anpasst ?

#content {
float:left;
width: 700px;
min-height: 300px;
background-color: #232323;
}
 
#navigation_right {
float:right;
width: 200px;
min-height: 300px;
background-color: #262626;
}

Achso und noch zum Verständnis , eigentlich brauche ich float:right; nicht nutzen den float:left und float:left container werden doch trotzdem nebeneinander gesetzt ? nachdenken

Zuletzt modifiziert von MOODFOR am 02.03.2016 - 13:04:01

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mi. 02.03.2016 13:50 Uhr #14

Nex4T Moderator

Zitat geschrieben von MOODFOR

Dankeschön hat funktioniert ! lächeln

Wie bekomme ich hin , dass sich #navigation_right der länge von #content anpasst ?

Das ist generell ein Kompliziertes Thema, entweder du setzt es als Hintergrundsgrafik in einem Div vorher oder du versuchst es mit

height:100%!Important;

bedeutet Quasi das die höhe 100% höchste priorität hat.

Liegt die Navigation eigentlich auch im ContainerHolder?

Zitat geschrieben von MOODFOR

Achso und noch zum Verständnis , eigentlich brauche ich float:right; nicht nutzen den float:left und float:left container werden doch trotzdem nebeneinander gesetzt ? 1

Genau

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

1 Mitglieder finden den Beitrag gut.

zitieren

Mi. 02.03.2016 14:37 Uhr #15

MOODFOR Mitglied

Zitat geschrieben von Nex4T

height:100%!Important;
Liegt die Navigation eigentlich auch im ContainerHolder?

Danke

Ja #content und #navigation_right befinden sich im #content_holder .
height:100%!Important; scheint nicht zu funktionieren . Mit dem Hintergrund einfach background_image und mit repeat-x; ?

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Mi. 02.03.2016 14:40 Uhr #16

Nex4T Moderator

Nein du kanst z.b eine 1 Pixel grafik machen die aus Content und beide Navigationen besteht und diese dann dem gesamten Content wo sich alles drin befindet, ich weiß nicht welcher div das bei dir ist als Hintergrundgrafik geben.

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 03.03.2016 08:34 Uhr #17

Mairu Coder

Ein andere Möglichkeit ist statt mit floats mit display: table usw. zu arbeiten.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite

1 Mitglieder finden den Beitrag gut.

zitieren

Do. 03.03.2016 18:26 Uhr #18

Wizzard26 Mitglied

Wenn linker und rechter Container die gleiche höhe haben sollen, ohne js verwenden zu müssen, ist Mairu´s weg der sinnigste.
Umfassenden Container auf display: table; setzten und die beien inneren als display: table-cell;

Es gibt zwar auch noch die möglichkeit der verschachtelung und rausziehen mit negativ werten, dass fürt aber auch schnell zu verwirrung und ist einfach nur umständlich und unsauber.

Und Nex4t, sorry wenn ich dir wiedersprechen muß, deine erklärung für das !important ist schlichtweg falsch in dem context.

.class {float: left!important;}
.class {float: right;}

das beispiel würde einfach nur bewirken das ".class" weiterhin ein float left haben würde und das float right, welches in der Hirachie danach gelesen wird, würde übersprungen werden. Dies trifft bei formatierungen der gleichen wertigkeit zu. Auf Height: 100% hat das garkeine besondere auswirkung.

Ein important widerum kann auch wieder ausgehebelt werden wenn ich die wertigkeit meiner anweisung erhöhe

Entweder, als beispiel

body .class {float: right !important;}
oder
#ParentId .class {float....!important}

Height 100% in diesem sinne gibt es sogesehen nicht, es sei den man richtet diese am body aus, dagibt es den ein oder anderen kniff für fullscreens zu erzeugen, sonst reagieren container immer auf feste werte oder ihren Inhalt.

Aber auch für fullscreen Container nutzt man eigentlich lieber css3 eigenschaften wie height : 100vh

Greetz Wizz

Zuletzt modifiziert von Wizzard26 am 03.03.2016 - 19:01:06

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 03.03.2016 18:31 Uhr #19

Nex4T Moderator

Zitat geschrieben von Wizzard26

Und Nex4t, sorry wenn ich dir wiedersprechen muß, deine erklärung für das !important ist schlichtweg falsch in dem context.

.class {float: left!important;}
.class {float: right;}

das beispiel würde einfach nur bewirken das ".class" weiterhin ein float left haben würde und das float right, welches in der Hirachie danach gelesen wird, würde übersprungen werden. Dies trifft bei formatierungen der gleichen wertigkeit zu. Auf Height: 100% hat das garkeine besondere auswirkung.

Ein important widerum kann auch wieder ausgehebelt werden wenn ich die wertigkeit meiner anweisung erhöhe

Wie kommst du auf Float:left!Imprtant???

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 03.03.2016 18:34 Uhr #20

Wizzard26 Mitglied

Wenn du richtig lesen würdest , würd dir auffallen das es ein beispiel ist zwinker

Nen Important kannst du jeder CSS anweisung mitgeben. Du nennst deine Klassen doch bestimmt auch nicht .class oder zunge

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 03.03.2016 18:39 Uhr #21

Nex4T Moderator

Ok aber was ist nun daran Falsch? Mit Important erzwingst du die Ausführung einer Eigenschaft, es sei den sie wird nochmals Überschrieben, genau wie ich sagte das Important höchste priorität hätte. grumml

Zitat geschrieben von css-wiki

Die Wirkweise der !important-Regel ist das "überbieten" der CSS-Prioritäten. Mit ! important setzen Sie die höchste Priorität.

Zuletzt modifiziert von Nex4T am 03.03.2016 - 18:43:40

while(!asleep()) sheep++;
www.movely.biz
www.webplant.eu

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 10.03.2016 17:36 Uhr #22

MOODFOR Mitglied

Zitat geschrieben von Nex4T

Danke, aber ich verstehe nicht ganz wie du das meinst .

Zitat geschrieben von Wizzard26

Danke !

Naja, eigentlich reicht es mir wenn der Hauptcontainer seine Hintergrundfarbe auf alle Container bezieht, damit zwischen den Containern keine Lücken enstehen .

Komischerweise wird der Hintergrund vom Hauptcontainer/Wrapper, nur auf den Header und die Navigation bezogen . Die beiden float: left; Container "content" und "navigation_right" werden nicht berücksichtigt .

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Do. 10.03.2016 19:39 Uhr #23

Wizzard26 Mitglied

Wenn ich dich jetzt gerade richtig verstehe, was nicht immer leicht ist wenn man nichts zum ansehen hat zwinker

, dann liegt das daran das du den Float nicht wieder aufhebst.

Bsp.

Wrapper
==>Header
==>Navi
==> float_left Container ==> Float_right Conatiner
Wrapper Ende

Header sowie Navi besitzen kein Float, also normales blockelemen verhalten.
Diese vergrößern den Wrapper auch in der höhe.

Die beiden Float elemente, heben sich aus dem Wrapper ab wegen dem Float.
Somit passt der Wrapper sich dort nicht real an die Höhe an. Der Trick dabei ist den Float wieder zu unterbrechen.
Einige benutzten dafür ein clear container welcher nach den floats aber vor dem schließenden Wrapper </div> gesetzt wird.

sieht dann so aus:
<div class="clear"></div>
.clear {clear:both;}

andere, so mach ich das auch gerne, geben dem Wrapper im css ein overflow:hidden;

beides unterbricht den Float und der Wrapper passt sich in der höhe an allen Elementen an.

Greetz Wizz

1 Mitglieder finden den Beitrag gut.

zitieren

Do. 17.03.2016 23:34 Uhr #24

MOODFOR Mitglied

Vielen Dank auch ohne Code, hast du das perfekt erklärt ! lächeln

Ich wollte heute eine network bar, machen also eine Leiste mit Links über dem eigentlichen Desing . Komischerweise ensteht ein kleiner Abstand zwischen oberen Browserrand und links und rechts ... Ich würde aber gerne, dass die Bar direkt am oberen Browserrand anschließt .

<div id="network_bar"> ( positioniert über dem wrapper )

#network_bar {
background-color: #000000;
border-bottom: 1px solid white;
margin-top: 0px;
margin-bottom: 30px;
}

Gleich wieder zwei kleine Fragen :
Wenn etwas Fullscreen sein soll, dann einfach width weglassen ?

Kann mir jemand position: absolute und position: relativ mit einfach Wörten erklären ? Irgendiwe erklären das alle HTML Seiten ziemlich unnachvollziehbar .

Zuletzt modifiziert von MOODFOR am 17.03.2016 - 23:37:49

The government pretend,
they your friend. And then when you steal some shit,they put you in jail

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 18.03.2016 07:40 Uhr #25

Mairu Coder

Ist eigentlich recht einfach, man mit position ein Element positionieren.
relative -> relativ zur eigentlichen Position des Elements
absolute -> absolute zum nächten Elternelement mit einer position Eigenschaft, wenn es keins gibt zum body Element.
Bei absolut wird das Element außerdem aus dem "Textfluss" entfernt, das heißt es überlagert ggf. andere Elemente, die an der jeweiligen Position eigentlich sind -> ggf. mit z-index Arbeiten.

Im Grunde gilt, wenn man position verwenden will, sollte es auch ein Elternelement mit position geben.
Dann kann man halt mit den Eigenschaften: top, left, right, bottom angeben wie das Element positioniert wird.

Beispiel relativ: top: 5px; left: -10px;
-> das Element wird 5px nach unten und 10px nach links verschoben.

Beispiel absolute: top: 5px; left: 10px
-> das Element wird im Elternelement an der Position 5, 10 (x, y) dargestellt und aus dem Textfluss entfernt.

Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite

0 Mitglieder finden den Beitrag gut.

zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » CSS Float