|
You last visited: Today at 21:21
Advertisement
Box Problem
Discussion on Box Problem within the Web Development forum part of the Coders Den category.
09/11/2017, 23:11
|
#1
|
elite*gold: 200
Join Date: Mar 2011
Posts: 352
Received Thanks: 9
|
Box Problem
Tag,
ich weiß nicht mehr weiter wie ich es beheben kann. Ich habe einen Article der 20% Breit ist und auf Fixed ist. Ebenso (auf Left:0 Fixiert). Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.
Hier ein Vorschau Bild:
[IMG=expandable: 1] [/IMG]
HTML:
HTML Code:
<article id="nav_fixed">
...(Rest ist eigentlich egal da nur h1 usw folgt.)..
</article>
*main*
<section id="titelbild">
<img src="img/bac.jpg" alt="bacardi">
</section>
<section id="profilbild">
<img src="img/no.png" alt="noimg">
</section>
CSS:
Code:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size:100%;
margin:0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
p {
font-family:'Roboto',sans-serif;
line-height:1.7;
}
a {
text-decoration:none;
}
ul {
margin:0;
padding:0;
}
li {
list-style:none;
}
img {
max-width:100%;
height:auto;
}
hr {
border:1px solid #72727d;
width:83%;
}
body {
margin:0;
background:#eee;
}
#nav_fixed {
position:fixed;
display:block;
background:#23232c;
top:0;
left:0;
bottom:0;
width:20%;
}
#titelbild {
display:block;
width:100%;
}
#titelbild img {
width:100%;
height:200px;
}
#profilbild {
display:block;
width:100%;
}
#profilbild img {
position:absolute; // Habe ich nur als Test gemacht damit man es sieht //
width:200px;
height:200px;
}
PS: Das Titelbild fängt ebenso an wo das Profilbild auch ist.
Danke! und lg
|
|
|
09/12/2017, 00:53
|
#2
|
elite*gold: 0
Join Date: Apr 2011
Posts: 11,118
Received Thanks: 2,435
|
Quote:
Originally Posted by Cc_Cc_Cc
Tag,
ich weiß nicht mehr weiter wie ich es beheben kann. Ich habe einen Article der 20% Breit ist und auf Fixed ist. Ebenso (auf Left:0 Fixiert). Das Problem ist wenn ich daneben eine Section machen möchte (Zur hauptseite) dann verschiebt es sich auf den Article.
Hier ein Vorschau Bild:
[IMG=expandable: 1] [/IMG]
HTML:
HTML Code:
<article id="nav_fixed">
...(Rest ist eigentlich egal da nur h1 usw folgt.)..
</article>
*main*
<section id="titelbild">
<img src="img/bac.jpg" alt="bacardi">
</section>
<section id="profilbild">
<img src="img/no.png" alt="noimg">
</section>
CSS:
Code:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size:100%;
margin:0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
p {
font-family:'Roboto',sans-serif;
line-height:1.7;
}
a {
text-decoration:none;
}
ul {
margin:0;
padding:0;
}
li {
list-style:none;
}
img {
max-width:100%;
height:auto;
}
hr {
border:1px solid #72727d;
width:83%;
}
body {
margin:0;
background:#eee;
}
#nav_fixed {
position:fixed;
display:block;
background:#23232c;
top:0;
left:0;
bottom:0;
width:20%;
}
#titelbild {
display:block;
width:100%;
}
#titelbild img {
width:100%;
height:200px;
}
#profilbild {
display:block;
width:100%;
}
#profilbild img {
position:absolute; // Habe ich nur als Test gemacht damit man es sieht //
width:200px;
height:200px;
}
PS: Das Titelbild fängt ebenso an wo das Profilbild auch ist.
Danke! und lg
|
Kenne mich selber nicht gut mit css aus, aber posistion fixed ist dort das falsche.
Sobald ein Element fixed ist können andere sich nicht mehr dran orientieren.
Such einfach mal bei google wie man so ein Menü an der Seite macht solltest schnell fündig werden.
|
|
|
09/12/2017, 11:41
|
#3
|
elite*gold: 25
Join Date: Jan 2015
Posts: 58
Received Thanks: 5
|
Deine Beschreibung ist etwas unklar. Mit genaueren Details könnte ich dir helfen.
|
|
|
09/12/2017, 13:57
|
#4
|
elite*gold: 15
Join Date: Sep 2010
Posts: 539
Received Thanks: 66
|
Wenn du position:fixed verwendest, positionieren sich die Elemente nicht mehr relativ zueinander, sondern sind absolut am Bildschirm positioniert. Bei fixed bleiben die Elemente immer dort, wo du sie positionierst, auch wenn du scrollst.
Das kannst du mal ausprobieren: Diese "Hauptseite"-section auf position:absolute, left:20% und width:80% setzen, sollte so dann funktionieren
|
|
|
09/12/2017, 15:40
|
#5
|
elite*gold: 0
Join Date: Feb 2011
Posts: 1,342
Received Thanks: 410
|
Mach einfach ein Container, wo du alle Elemente drin platzierst außer dein fixiertes Element. Diesen Container gibst du einfach ein margin-left mit der Breite des fixierten Elements.
Beispiel :
|
|
|
09/22/2017, 15:40
|
#6
|
elite*gold: 177
Join Date: Jan 2010
Posts: 5,963
Received Thanks: 1,130
|
Ich würde einfach die Lösung mit CSS3 und HTML5 machen.
HTML Code:
<div id="box">
<article>bla bla</article
<aside>blub blubb</aside>
<div class="clear"/>
</div>
#box {
display: block;
width: 100%;
max-width: 960px;
height: 200px;
}
#box article {
display: inline-block;
width: 80%;
height: auto;
float: left;
}
#box aside {
display: inline-block;
width: 20%;
height: auto;
float: right;
}
.clear {clear: both;}
article oder section geht beides. Ich habs nur auf die Schnelle gemacht, sollte aber funktionieren.
Den Header würde ich auch mit dem <header> Tag lösen.
Allgemein rate ich dir zu HTML5 und CSS3, da es mehr Möglichkeiten bietet und auch im Code sauberer aussieht.
Möglichkeiten wie das responsive Design bieten sich dadurch auch an.
Dort gibts etwas Doku dazu.
|
|
|
|
Similar Threads
|
[!] Problem mit box offen / box bug / bug cufere
01/24/2015 - Metin2 Private Server - 0 Replies
Hallo gibt.
Hello there.
Salutare.
Ich habe ein Problem mit dieser Box,beim Drücken Klick 2 nichts angezeigt
I have a problem with this box, when pressing click 2 nothing appears.
Am o problema cu aceasta cutie, nu se deschide cand apas click 2 pe ea.
Ich habe die Box in Server implementiert.
I have implemented the box in server base and client...
|
[VERKAUFE] Level 39 ACC mit K1 Pink, Medic BOX, SP etc.[10 €!!!!!]!!!!!!!!!!!!! Box,
01/26/2012 - WarRock Trading - 1 Replies
Hi möchte meinen Acc verkaufen.
http://i39.tinypic.com/2lmqkqe.jpg
http://i44.tinypic.com/v312q0.jpg
Sollte durch die Bilder alles klar sein.
Kill Ratio: 1.06
Kills: 17133
|
[VERKAUFE] Level 39 ACC mit K1 Pink, Medic BOX, SP etc.[20 €!!!!!]!!!!!!!!!!!!! Box,
01/25/2012 - WarRock Trading - 0 Replies
Hi möchte meinen Acc verkaufen.
http://i39.tinypic.com/2lmqkqe.jpg
http://i44.tinypic.com/v312q0.jpg
Sollte durch die Bilder alles klar sein.
Kill Ratio: 1.06
Kills: 17133
|
Suche billige diesel viker r-box, searching cheap diesel viker r-box
11/26/2010 - Off Topic - 1 Replies
I didnt know if this was the apropriate part of the forum for this but mods, if u dont agree, then close it plz.
as title sais, looking for one,
Can me a knock off(since im a poor student).
I think its not allowed to post links to those sites(since i live in the Netherlands)
so please pm me.
regards,
Newbb
|
[B]Half-Life 2: The Orange Box [S]X-box 360 Gold Time /psc
09/20/2010 - Steam Trading - 0 Replies
Halo ich bite hier die Half-Life 2: The Orange Box an
Auf Den account befinden sich die spiele
Teamfortress 2
Portel
Half Life 2
HL2: Episode One
|
All times are GMT +2. The time now is 21:21.
|
|