Hilfe bin neu im bereich HTML/CSS

xNussknacker · 03/16/2014, 12:45

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

KoKsPfLaNzE · 03/16/2014, 13:57

guck dir doch mal

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^^

~ JWonderpig ~ · 03/16/2014, 13:58

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.

.Kirataro · 03/16/2014, 14:01

^ This.

Ansonsten ist

mein erster Anlaufpunkt, wenn ich mal was für HTML o. CSS brauche.

~ JWonderpig ~ · 03/16/2014, 14:07

selfhtml ist ja etwas veraltet.
Ich würde eher das hier empfehlen:

Ist zwar auf Englisch, aber nicht schwer zu verstehen.

xNussknacker · 03/16/2014, 15:15

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

~ JWonderpig ~ · 03/16/2014, 19:46

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

xEncounter · 03/17/2014, 12:26

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.

~ JWonderpig ~ · 03/17/2014, 13:32

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

xEncounter · 03/17/2014, 14:58

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:

NotEnoughForYou · 03/17/2014, 16:18

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>

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

Screen:

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

xEncounter · 03/17/2014, 19:46

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.

xNussknacker · 03/18/2014, 00:06

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

xEncounter · 03/18/2014, 17:58

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>

xNussknacker · 03/18/2014, 18:04

Geschafft, habe es nun so gemacht:

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