0
Ich versuche, 2 beiseite Elemente (grau und gelb - Klasse = "SoundLogoContainer, iAmSam" beide haben Klasse von "columnDiv") sitzen oben unter dem Header-Element. Die 2 side-Elemente sind die Kinder des Haupt-Tags und der Header ist gleich dem Haupt-Tag.Wie macht man 2 untergeordnete Elemente, ohne einen Offset oben zu sein?
Ich habe Float-, Inline-Block- und Inline-Table-Methoden verwendet. Bei jeder Methode wird das Kind zur Seite verzerrt oder versetzt und sitzt nicht in gleicher Höhe direkt unter dem Header.
Wie kann ich es so einrichten, dass beide asides gleich unter dem Header-Tag (pink) sitzen?
A codepen ist here und eine Geige here
Danke
<body>
<!------------------------------------------------------------------------->
<!--HEADER consists of h1 logo (text). They are seperated witha span so to edit text seperately-->
<header>
<h1 role="button" title="BGDR creative"><span class="BGDR">BGDR</span> <br> <span class="creative">creative</span>
</h1>
<img class="responsMenu" src="../assets/icons/respive_icon.svg" alt="dropdown menu" title="menu" role="menu">
</header>
<!------------------------------------------------------------------------->
<!--The MAIN is the parent element to 2 asides that are meant to RELATIVELY be top 0 under the header (this does not work - it breaks and there is an offset-->
<main>
<!--"soundLogo..." is supposed to be top 0 and left 0/float left-->
<aside class="soundLogoContainer columnDiv">
<div class="soundIcn"></div><!--a circle icon of a soundwave-->
</aside>
<!--"iAmSam" is supposed to be top 0 and right 0/float right-->
<aside class="iAmSam columnDiv">
<p><span class="myNameTxt homeText">MY NAME IS SAM</span></p>
<p><span class="iMakeTxt homeText">I MAKE STUFF</span></p>
<p><span class="soundTxt homeText">SOUND</span></p>
<p><span class="animationTxt homeText">VISUAL</span></p>
<p><span class="phototxt homeText">PHOTO</span></p>
<p><span class="webtxt homeText">WEB</span></p>
</aside>
<!--"homeSkillContainer div is a parent element to the SVG and should be RELATIVELY top 0 at the bottom of the page. It includes 1 svg of 4 images-->
<div class="homeSkillContainer">
<!--SVG child element container-->
<div class="skillIcons4x4">
<!--SVG IMAGE-->
<svg id="Artboard_1" data-name="Artboard 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 215.66 164.68"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title>home(mobile_port)</title><g id="animation_icon_Image" data-name="animation_icon Image"><circle class="cls-1" cx="38.59" cy="82.52" r="37.09"/><rect id="animeBox" class="cls-1" x="18.45" y="66.77" width="39.06" height="39.06" rx="7.62" ry="7.62"/><path id="animeBoxLine" class="cls-1" d="M28.39,60.26H51.31A12.72,12.72,0,0,1,64,73V95.89"/><circle class="cls-1" cx="177.07" cy="82.52" r="37.09"/><path id="leftBracket" class="cls-1" d="M164.18,71.7l-6.8,3.93-6.81,3.91a3.49,3.49,0,0,0,0,6.06l6.81,3.91,6.81,3.91"/><line id="forwardSlash" class="cls-1" x1="184.55" y1="74.36" x2="171.03" y2="90.58"/><path id="rightBracket" class="cls-1" d="M190,93.28l13.63-7.79a3.49,3.49,0,0,0,0-6.06L190,71.65"/><circle class="cls-1" cx="107.91" cy="38.59" r="37.09"/><rect id="filmBody" class="cls-1" x="86.16" y="33.44" width="37.37" height="23.36" rx="4.94" ry="4.94"/><circle id="leftCamCircle" class="cls-1" cx="94.46" cy="25.13" r="8.18"/><circle id="rightCamCircle" class="cls-1" cx="113.15" cy="25.13" r="8.18"/><path id="filmLens" class="cls-1" d="M132.88,52.77l-9.35-3.12V40.31l9.35-3.12a3.55,3.55,0,0,1,4.67,3.37v8.83A3.55,3.55,0,0,1,132.88,52.77Z"/><circle class="cls-1" cx="107.91" cy="126.1" r="37.09"/><rect id="camBody" class="cls-1" x="80.36" y="109.47" width="55.1" height="34.44" rx="7.27" ry="7.27"/><path id="camButton" class="cls-1" d="M87.63,109.28V105.9a2.12,2.12,0,0,1,2.12-2.12h6a2.12,2.12,0,0,1,2.12,2.12h0v3.38"/><circle id="camLens" class="cls-1" cx="107.91" cy="127.45" r="12.05"/></g></svg>
</div>
</div>
</main>
</body>
* {
margin:0 ;
padding:0;
}
body {
width: 100%;
}
header {
width:100%;
}
h1, h2, h3, h4, p {
font-family: josefin-sans, sans-serif;
}
header h1 {
font-weight: 300;
font-size: 55px;
width: 165px;
position: absolute;
left: 25px;
}
.BGDR {
letter-spacing: 4px;
line-height: 0px;
height: 0px;
}
.creative {
position: relative;
top: -25px;
}
/*mobile device*/
@media (max-width:414px){
header {
height:100px;
}
header h1 {
font-weight: 300;
font-size: 40px;
width: 165px;
position: absolute;
left: 15px;
}
.BGDR {
letter-spacing: 3px;
line-height: 0px;
height: 0px;
}
.creative {
position: relative;
top: -25px;
}
body header {
height: 80px;
background-color: pink;
}
body main {
background-color: skyblue;
display: inline-table;
width: 100%;
}
.columnDiv {
display: inline-table;
width: 50%;
height: 140px;
}
.soundLogoContainer {
background-color: grey;
}
.iAmSam {
background-color: yellow;
}
.soundIcn {
background-image: url(../assets/icons/sound_icon.svg);
background-repeat: no-repeat;
background-position: center;
height: 139px;
width: 133px;
margin: 0 auto;
}
.homeSkillContainer {
top: 0px;
width: 100%;
height: 241px;
background-color: orange;
}
.imgtextIMAKE {
position: relative;
top: 0px;
margin: 0 auto;
width: 96%;
height: 90%;
}
.iAmSam.columnDiv .myNameIsSam {
position: relative;
top: 10%;
margin: 0 auto;
height: 86%;
}
.iAmSam {
text-align: right;
}
#Artboard_1 {
}
.myNameTxt {
font-size:20px;
}
.iMakeTxt {
font-size: 21px;
letter-spacing: 2.2px;
}
.soundTxt, .animationTxt, webTxt {
font-size:25px;
}
.phototxt {
font-size:21px;
}
.webtxt {
font-size:25px;
}
.homeText {
padding-top: 0;
padding-right: 11px;
padding-left: 0;
padding-bottom: 0;
}
}
/*Tablet view*/
@media (min-width:415px) and (max-width:949px){
}
/*Desktop view*/
@media (min-width: 950px){
}
/*For the responsive menu*/
@media (max-width: 719px){
.responsMenu {
width: 40px;
height: 40px;
position: relative;
float: right;
right: 30px;
top: 30px;
}
}
@media (min-width: 719px){
.responsMenu {
display:none;
}
}
/*TEXT QUERIES*/
/*Blackberry width*/
@media (max-width: 349px){
.myNameTxt {
font-size:18.2px;
}
.iMakeTxt {
font-size: 19.6px;
letter-spacing: 1.9px;
}
.soundTxt {
font-size:25px;
}
.animationTxt {
font-size:25px;
}
.phototxt {
font-size:21px;
}
.webtxt {
font-size:25px;
}
}
also möchten Sie grau div und gelb div unter der Menüleiste? –