Hilfe bin neu im bereich HTML/CSS

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 View Post
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 View Post
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...]
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 View Post
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>