Hilfe bin neu im bereich HTML/CSS

Page 1 of 2

03/16/2014 12:45 xNussknacker#1

Hallo ich bin gerade an einem Projekt f�r einen Minecraft Server eine Website zu machen, da ich neu im bereich HTML/CSS bin brauche ich eure Hilfe..

Ich habe verschiedenartige divs von menu1 bis zu menu 4

Jetzt sind das so Boxen die nebeneinander kommen sollten..

Wie mache ich jetzt das das geht, mit float hab ich nur 2 hinbekommen..

Noch ein Bild wie ich es gerne haben m�chte

[Only registered and activated users can see links. Click Here To Register...]

03/16/2014 13:57 KoKsPfLaNzE#2

guck dir doch mal [Only registered and activated users can see links. Click Here To Register...] an, da haste gleich noch mobile website, koenntest die boxen dann via col-sm-4 neben einander machen.

Wenn das mit float machen willst musst die 4boxen float left setzen und eine breite von ka 230px oder so, danach nicht das clear both vergessen, sonst geht nix mehr^^

03/16/2014 13:58 ~ JWonderpig ~#3

Nimm f�r die Men�punkte lieber eine <ul> oder <nav> anstatt nur <div> Boxen.
Wenn du in der <ul> die <li> Element floatest, ( oder display: inline; ) hast du kein Problem damit, dass nur 2 Boxen nebeneineander passen.

Am besten postest du deinen Code, da man mit so wenig Infos schlecht helfen kann.

03/16/2014 14:01 .Kirataro#4

^ This.

Ansonsten ist [Only registered and activated users can see links. Click Here To Register...] mein erster Anlaufpunkt, wenn ich mal was f�r HTML o. CSS brauche.

03/16/2014 14:07 ~ JWonderpig ~#5

selfhtml ist ja etwas veraltet.
Ich w�rde eher das hier empfehlen:
[Only registered and activated users can see links. Click Here To Register...]

Ist zwar auf Englisch, aber nicht schwer zu verstehen.

03/16/2014 15:15 xNussknacker#6

ich versuche jetzt mal die verschiedenen Vorschl�ge, schonmal ein danke an alle :)

EDIT habe es jetzt geschaft ist alles nebenenander jedoch noch nicht centriert

03/16/2014 19:46 ~ JWonderpig ~#7

dem Container, wo alles drin ist eine Breite geben und dann margin: auto;

03/17/2014 12:26 xEncounter#8

Quote:

Originally Posted by Caiv

dem Container, wo alles drin ist eine Breite geben und dann margin: auto;

hat mit zentrieren nichts zu tun. Und der Wert "auto" sollte m�glichst vermieden werden.

Du setzt einfach ein <center> </center> tag um deine Div's.

Somit sind diese zentriert, wenn du das Problem hast was ich denke.

mit margin kannst du die abst�nde zwischen den divs nochmal justieren.

03/17/2014 13:32 ~ JWonderpig ~#9

<center> ist in html5 veraltet.
Nat�rlich zentriere ich meine Hauptdivbox mit margin auto

03/17/2014 14:58 xEncounter#10

Hab mir mal die M�he gemacht das einigerma�en nachzubauen.

HTML Code:

<html>

<head>
<title> E*pvper's Loesung </title>

<style>

body{

margin-left: 50px;
margin-right: auto;
background-color: grey;
}

.werbung{

background-color: yellow;
border: 5px solid red;
float: left;
width: 150px;
height: 800px;
position: static;
margin-top: 60px;
margin-right:20px;

}
.werbung2{

background-color: yellow;
border: 5px solid red;
float: left;
width: 150px;
height: 800px;
position: static;
margin-top: -90px;
margin-left:10px;

}

.header{

position: static;

width: 900px;

height: 150px;

float: left;
background-color: pink;

border: 5px solid black;


}

.menu{

position: static;

width: 150px;
height: 150px;

float: left;

margin-top: 10px;
margin-right: 70px;
background-color: green;

border: 5px solid black;



}

.index{

position: static;

background-color: lightblue;

border: 5px solid black;
float: left;

width: 800px;

height: 600px;
margin-left: 190px;
margin-top: -500px;

}

.task{

position: static;

float: left;

width: 800px;

height: 30px;

background-color: purple;

border: 5px solid black;

margin-top: 30px;

margin-left: 190px;



}



</style>

</head>

<body>

<div class="werbung">
<p align="center"> Werbung 1</p>
</div>
<div class="header">
<p align="center"> Header</p>
</div>
<div class="menu">
<p align="center"> menu 1 </p>
</div>
<div class="menu">
<p align="center"> menu 2 </p>
</div>
<div class="menu">
<p align="center"> menu 3 </p>
</div>
<div class="menu">
<p align="center"> menu 4 </p>
</div>
<div class="werbung2">
<p align="center"> Werbung 2</p>
</div>
<div class="index">
<p align="center"> Index</p>
</div>
<div class="task">
<p align="center"> Task</p>
</div>
</body>

</html>

Die Werte sind teilweise unsch�n und passen nicht ganz ineinander, aber sind leicht anzupassen wenn man das Grundger�st hat :)

Screen:
[Only registered and activated users can see links. Click Here To Register...]

03/17/2014 16:18 NotEnoughForYou#11

Quote:

Originally Posted by xEncounter

Hab mir mal die M�he gemacht das einigerma�en nachzubauen.

HTML Code:

<html>

<head>
<title> E*pvper's Loesung </title>

<style>

body{

margin-left: 50px;
margin-right: auto;
background-color: grey;
}

.werbung{

background-color: yellow;
border: 5px solid red;
float: left;
width: 150px;
height: 800px;
position: static;
margin-top: 60px;
margin-right:20px;

}
.werbung2{

background-color: yellow;
border: 5px solid red;
float: left;
width: 150px;
height: 800px;
position: static;
margin-top: -90px;
margin-left:10px;

}

.header{

position: static;

width: 900px;

height: 150px;

float: left;
background-color: pink;

border: 5px solid black;


}

.menu{

position: static;

width: 150px;
height: 150px;

float: left;

margin-top: 10px;
margin-right: 70px;
background-color: green;

border: 5px solid black;



}

.index{

position: static;

background-color: lightblue;

border: 5px solid black;
float: left;

width: 800px;

height: 600px;
margin-left: 190px;
margin-top: -500px;

}

.task{

position: static;

float: left;

width: 800px;

height: 30px;

background-color: purple;

border: 5px solid black;

margin-top: 30px;

margin-left: 190px;



}



</style>

</head>

<body>

<div class="werbung">
<p align="center"> Werbung 1</p>
</div>
<div class="header">
<p align="center"> Header</p>
</div>
<div class="menu">
<p align="center"> menu 1 </p>
</div>
<div class="menu">
<p align="center"> menu 2 </p>
</div>
<div class="menu">
<p align="center"> menu 3 </p>
</div>
<div class="menu">
<p align="center"> menu 4 </p>
</div>
<div class="werbung2">
<p align="center"> Werbung 2</p>
</div>
<div class="index">
<p align="center"> Index</p>
</div>
<div class="task">
<p align="center"> Task</p>
</div>
</body>

</html>

Das Attribut align ist veraltet und sollte nicht mehr inline verwendet werden. Wer floatet muss auch clearen und Klassen sollte als solche genutzt werden und nicht teilweise wie ID's verwendet werden. Navigationen bzw. Men�s sollten nicht �ber einzelne Divs sondern �ber Listings und in html5 �ber den Tag <nav> erstellt werden. Dar�berhinaus muss die position:static nicht zus�tzlich angegeben werden, da dass der Standardfall ist und zwecks automatischer Anpassung sollten keine festen H�hen verwendet werden.

mfg

03/17/2014 19:46 xEncounter#12

Quote:

Originally Posted by NotEnoughForYou

Das Attribut align ist veraltet und sollte nicht mehr inline verwendet werden. Wer floatet muss auch clearen und Klassen sollte als solche genutzt werden und nicht teilweise wie ID's verwendet werden. Navigationen bzw. Men�s sollten nicht �ber einzelne Divs sondern �ber Listings und in html5 �ber den Tag <nav> erstellt werden. Dar�berhinaus muss die position:static nicht zus�tzlich angegeben werden, da dass der Standardfall ist und zwecks automatischer Anpassung sollten keine festen H�hen verwendet werden.

mfg

Mit HTML 5 bin ich ehrlich gesagt nicht vertraut.

Ich wollte dem TE nur eine kleine Hilfe geben.

Das der Code nicht ganz sauber ist mit zb ID und Klasse war mir bewusst.

Dennoch danke f�r die Info's.

03/18/2014 00:06 xNussknacker#13

Wow vielen dank euch alles bin jetzt weitergekommen.., jedoch habe ich jetzt eine frage worauf ich keine simple Antwort finde, im menu1 habe ich nun ein Background Image, das passt auch super nun m�chte ich das wenn man draufklickt das man z.B auf einen externen link kommt.

Danach w�rde mich noch wundernehmen was dieses "position: static;" bedeutet ebenfalls w�re es toll wenn ihr mir zu diesem "clear" eine Aufkl�rung gibt komme da auch nicht zu 100% draus.

Allen schonmal ein danke f�r die Antworten.. Ihr seit super!

Freundliche Gr�sse Ramon

03/18/2014 17:58 xEncounter#14

position static bedeuted dass, das html element nicht aus dem Html-Ger�st rausbricht.

Zum Beispeil mit position:absolute w�re es der fall.

wenn du float benutzt richtes sich das danach folgende element immer auf das zuletzt verwendete float. damit nicht das umflossen wird was nicht umflossen werden soll setzt man clear ein um das float aufzuheben.

du sagst dem div einfach: <div href="http://www.google.de"> </div>

03/18/2014 18:04 xNussknacker#15

Geschafft, habe es nun so gemacht:

<a href="http://www.google.com"><li id="menu1"></li></a>

Page 1 of 2