I am making my first webpage and am having trouble positioning elements. They keep overlapping each other when I resize the browser. The title is positioned absolute, but this means it overlaps the image at the top. I cant get it into position by any other means. Can anyone help?
here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Guitar Lessons</title>
<link href="./bio.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth"/>
<div class="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<nav class="navigation">
<ul>
<li><p class="first">About Me</p></li>
<li><p class="second">My Music</p></li>
<li><p class="third">FAQ</p></li>
<li><p class="fourth">Prices</p></li>
<li><p class="fifth">Contact</p></li>
</ul>
</nav>
</header>
<h2 id="bio">My Bio</h2>
<p class="bio">Hello! I am Duncan – famous for imparting my guitar knowledge on the residents of Isleworth. I have been playing the guitar for over ten years and can navigate<br/> the fretboard confidently. I am completely self-taught, and it’s been a real learning curve which I am keen to pass on to others wishing to learn the guitar. Through<br/> my learning experience, I realise the value of having human interaction and feedback whilst learning. I am a very patience teacher, which makes me<br/> suitable for teaching beginners.<br/><br/>
My musical influences are based heavily on the blues, and my favourite guitarists include Peter Green, Muddy Waters, B.B. King, Jimmy Page, Eric Clapton,<br/> Wilko Johnson and Jimmy Hendrix. I have recently started to write my own music, with the aim one day of recording properly and creating a short album.
</p>
<h2 id="lessons">Lesson Content</h2>
<p class="content">I specialise in taking complete beginners through the different aspects of playing the guitar and I aim to have you confident and skilled enough to play a<br/> short piece of music (something other than a nursery rhyme!) within just three lessons. Aspects of playing my lessons cover include:</p>
<ul class="lessons">
<li>Basic open chord shapes</li>
<li>Strumming patterns and rhythm</li>
<li>Learning notes on the fret board</li>
<li>Lead techniques and single note lines</li>
<li>Advice on gear and the best guitars to buy</li>
</ul>
<p class="content">Practice makes perfect, and you are given homework between each lesson to play on your guitar.</p><br/><br/>
<div class="guitar">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar.jpg" />
</div>
<br/>
<p class="copyright">Copyright Duncan Hammett 2018</p><br/>
</body>
here is the css:
nav li {
display: inline-block;
padding: 50px;
}
.first {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 28px;
}
.first:hover {
color: teal;
}
.second {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.second:hover {
color: teal;
}
.third {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.third:hover {
color: teal;
}
.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fourth:hover {
color: teal;
}
.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fifth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.fifth:hover {
color: teal;
}
.header img {
width: 1440px;
height: 400px;
position: relative;
left: 240px;
min-width: 1440px;
max-width: 1440px;
min-height: 400px;
max-height: 400px;
}
.cont {
position: relative;
}
.top-left {
position: absolute;
top: 11px;
left: 12px;
color: teal;
font-size: 124px;
}
body {
font-family: Helvetica;
text-align: center;
font-size: 20px;
}
.guitar img {
width: 1100px;
height: 600px;
position: static;
min-width: 1100px;
max-width: 1100px;
min-height: 600px;
max-height: 600px;
}
.bio {
line-height: 1.6;
color: teal;
}
.content {
line-height: 1.6;
color: teal;
}
.lessons {
line-height: 1.6;
list-style-position: inside;
color: teal;
}
.copyright {
color: teal;
font-size: 16px;
}
Related
at first im completly new to CSS and have a Question about my half working animation.
So I got an Container an this Container I wanted to slide from the Header to the normal Position but the Animation goes only the halfway and then its just starting spring without an animation to the normal Position.
Here is my CSS Code maybe you find anything I did wrong or something that I can do better to avoid those Problems.
And yeah I know my class name are not good, I just tried out CSS for the first time.
body{
font-family: 'Open Sans', sans-serif;
background-color: #f3f5f6;
padding-left: 100px;
padding-right: 100px;
}
.class-image{
width: 100%;
height: 500px;
object-fit: cover;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 10px 10px 0px 0px;
object-position: 30% 60%;
display: block;
}
.colorChange{
font-size: 20px;
font-weight: bold;
color: black;
}
.containerClass{
padding: 16px;
vertical-align: middle;
animation: example 2s linear;
width:85%;
position:absolute;
}
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
a{
color: #831D17;
text-decoration: none;
margin-left: 16px;
font-weight: 700;
}
a:hover{
font-weight:bolder;
color: white;
padding-left: 8px;
padding-right: 8px;
display: inline-block;
line-height: 200%;
font-size: 16px;
border-radius: 20px;
background-color: #333333;
text-decoration: none;
}
#keyframes example {
0% {
bottom:100vH
}
100% {
bottom: 0vH
}
}
.highlight{
color: black;
font-weight: bolder;
font-size: 48px;
}
.Fotoind{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
}
.MapsContainer{
margin-top: 16px;
width: 100%; border-radius: 10px; overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
justify-content:space-between ;
}
.maps-right{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
margin-left: 16px;
width: 30%;
}
.mapStyle{
border: 0;
height: 350px;
width: 70%;
}
.contentdown{
padding: 8px;
}
.legal{
margin-right: 16px;
}
<body>
<div class="navbar">
<h1 class="colorChange">Der Blaue Planet<br>
<span class="highlight"> Die Erde</span>
</h1>
<div>
google
Termin
Preise
Kalender
</div>
</div>
<div class="containerClass">
<img class="class-image" src="Bilder/4k.jpg">
<div class="Fotoind">
Individuelle Fotos
</div>
<div class="MapsContainer">
<iframe class="mapStyle" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.8384006473802!2d13.596700815695565!3d52.48206157980705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a849b423ae37e9%3A0x1c91decc13ce5a24!2sMechthildstra%C3%9Fe%2053%2C%2012623%20Berlin!5e0!3m2!1sde!2sde!4v1633806883383!5m2!1sde!2sde"
allowfullscreen="" loading="lazy"></iframe>
<div class="maps-right">
Ein Fast proffesionelles Seiten Layout
</div>
</div>
<div class="contentdown">
<span class="legal"> Copyright von morgen </span> | Impressum | Datenschutz
</div>
</div>
</body>
I used margin-top instead of bottom property and it works fine.
#keyframes example {
0% {
margin-top: calc(-100vh - 100%);
}
100% {
margin-top: 0vh
}
}
I added this to jsfiddle. Link
I am trying to put the horizontal bar beneath the text title where is inside of the container <div> but the horizontal bar just effect in the width, but not moving up to the position...
I am hesitating that should I create one more div. I have been trying to move up the hr by top with vh or even margin, but that is not workable.
What I want is to move the hr below the title.
How I want the hr to move up
Original
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height: 250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card {
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.victor {
position: relative;
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
.user-name {
position: absolute;
width: 30%;
left: 20vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #2d3248;
font-size: 18px;
}
.user-age {
position: absolute;
width: 20%;
right: 15.5vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
font-size: 18px;
}
.user-location {
position: absolute;
width: 25%;
left: 22.5vh;
top: 45.5vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
}
hr {
border-top: 1px solid #969696;
width: 100%;
bottom: 50vh;
}
<div class="topcon">
<img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
<img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
<p class="user-name">Victor Crest</p>
<p class="user-age">26</p>
<p class="user-location">London</p>
<hr /> 80K Followers 803K Likes 1.4K Photos
</div>
Try with this
hr{
border-top: 1px solid #969696;
margin-left: -50px;
width: 350px;
margin-top: -15px;
}
change the margin top and width and margin left according to your div width and height
You can also dismiss the horizontal ruler (line) entirely, and use CSS border-top. I tried and got this:
body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
a {
text-decoration: none;
}
.header {
position: relative;
top: 1px;
left: 589px;
padding-top: 20px;
padding-bottom: 10px;
}
.subtitle {
position: relative;
right: 26px;
letter-spacing: 2px;
padding-top: 5px;
font-size: 21px;
font-family: arial;
font-weight: bold;
color: #6b6b6b;
text-shadow: 0px 0 #6b6b6b, 0 0px #6b6b6b, 2px 0 #6b6b6b, 0 0px #6b6b6b;
}
/* Menu*/
nav {
position: relative;
left: 210px;
height: 70px;
border-radius: 60px;
background: #dc67e9;
width: 1000px;
}
ul {
margin-left: 17%;
}
ul li {
display: inline-block;
line-height: 80px
}
ul li a {
text-decoration: none;
font-family: 'Coiny', cursive;
font-size: 19px;
color: white;
padding: 0 20px
}
ul li a:hover {
color: black;
}
.bannerimage {
margin-left: 5px;
margin-top: 4px;
}
.banner {
margin-top: 4px;
background-color: #dc67e9;
width: 100%;
height: 589px;
}
.bannerpromo1 {
position: relative;
bottom: 500px;
margin-left: 60px;
font-family: 'Lobster', cursive;
color: black;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 70px;
}
.bannerpromo2 {
position: relative;
bottom: 470px;
margin-left: -780px;
font-family: 'Lobster', cursive;
color: #585656;
text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
font-size: 50px;
text-align: center;
}
.subscribebanner {
width: 250px;
height: 50px;
background-color: #dc67e9;
position: relative;
left: 190px;
bottom: 430px;
border: 4px solid white;
}
.subscribebannertext {
margin-left: 30px;
margin-top: 15px;
font-family: 'Coiny', cursive;
word-spacing: 2px;
font-size: 30px;
}
.howitworks {
font-size: 60px;
font-family: 'Lobster', cursive;
text-shadow: #a8a8a8 4px 6px;
margin-top: 50px;
position: relative;
left: 555px;
}
.subheaderbox1 {
position: relative;
margin-top: 20px;
right: 315px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox2 {
position: relative;
bottom: 100px;
left: 65px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaderbox3 {
position: relative;
bottom: 200px;
left: 450px;
border-radius: 25px;
background: #adcae1;
width: 200px;
height: 100px;
}
.subheaders {
position: relative;
bottom: 275px;
font-size: 40px;
margin-left: -265px;
word-spacing: 250px;
letter-spacing: 3px;
color: white;
}
.box1 {
position: relative;
right: 370px;
bottom: 225px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box2 {
position: relative;
right: -15px;
bottom: 500px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.box3 {
position: relative;
right: -405px;
bottom: 780px;
border-radius: 7px;
border: 5px dotted #dc67e9;
}
.step1 {
position: relative;
right: 932px;
bottom: 219px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step2 {
position: relative;
right: 546px;
bottom: 493px;
color: #666666;
font-size: 30px;
text-align: center;
}
.step3 {
position: relative;
right: 153px;
bottom: 766px;
color: #666666;
font-size: 30px;
text-align: center;
}
.section1 {
position: relative;
margin-top: 20px;
bottom: 660px;
background-color: #adcae1;
margin-left: -570px;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section2 {
position: relative;
left: 149px;
bottom: 660px;
background-color: #adcae1;
width: 720px;
height: 500px;
text-align: center;
color: white;
}
.section1title {
padding-top: 80px;
font-size: 70px;
}
.section1text {
font-size: 40px;
text-shadow: none;
color: #f0f0f0;
}
.section2title {
padding-top: 100px;
font-size: 70px;
}
.section2text {
font-size: 35px;
text-shadow: none;
color: #f0f0f0;
padding-left: 1px;
}
.imgsect1 {
margin-left: 148px;
position: relative;
bottom: 1660px
}
.imgsect2 {
position: relative;
bottom: 1668px;
right: 571px;
}
<!DOCTYPE html>
<html>
<head>
<title>SweetVie-Home-Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="indexstyle.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
<link rel="stylesheet" href="indexstyle.css">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="topfiller"></div>
<div class="header">
<img src="images/logo.jpg" height="90" alt="SweetVieLogo">
<h2 class="subtitle">Vegan Baking Made Easy</h2>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COMMUNITY</li>
<li>FAQ</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
<div class="banner">
<img class="bannerimage" src="images/mainpageimage.jpg" width="1414px" height="580px" alt="homepagebanner">
<h2 class="bannerpromo1">Premium Packaged <br>Dessert Baking Kits</h2>
<h2 class="bannerpromo2">High-quality,<br> organic and<br> vegan ingredients </h2>
<div class="subscribebanner">
<h3 class="subscribebannertext"> SUBSCRIBE</h3>
</div>
</div>
<div class="howitworks">
<h1>How It Works</h1>
<div class="subheaderbox1"></div>
<div class="subheaderbox2"></div>
<div class="subheaderbox3"></div>
<div class="subheaders">
<h2>Click Prepare Enjoy</h2>
</div>
<div>
<img class="box1" src="images/howitworks1.jpg" height="200" width="300" alt="step1">
</div>
<h3 class="step1">Select one of the three<br>subscription options</h3>
<div>
<img class="box2" src="images/howitworks2.jpg" height="200" width="300" alt="step2">
</div>
<h3 class="step2">Get involved and play<br>with your food</h3>
<div>
<img class="box3" src="images/howitworks3.jpg" height="200" width="300" alt="step3">
</div>
<h3 class="step3">Share or indulge in your<br>decadent and delicious treat</h3>
<div class="section1">
<h2 class="section1title">Food Time<br> Family Time</h2>
<br>
<p class="section1text">Timeless family fun,<br> sharing special treats with the <br> special people you love </p>
</div>
<div class="section2">
<h2 class="section2title">The Next Step</h2>
<br>
<p class="section2text">Health and desserts don't really<br> go together, with the exception of<br> SweetVie's sweets. Vegan desserts are the<br> baby steps you need for the best kind<br> of progress</p>
</div>
<div class="imgsect1">
<img src="images/homepagesection1.jpg" width="720px" height="500px" alt="Food Time Family Time.jpg">
</div>
<div class="imgsect2">
<img src="images/homepagesection2.jpg" width="720px" height="500px" alt="The Next Step.jpg">
</div>
</body>
</html>
I'm currently making a website for a school project that requires a menu bar. The menu bar changed to black whenever the cursor hovered over it previously, but recently stopped and now only changes color when it is selected/clicked.
I'm very new to html and css so I know my syntax or method of positioning my elements/divs may be poor.
But if there are any tips or guidance on what I should do to fix this problem, that would be great.
As pointed out in the comments, the div with class bannerpromo2 is getting in front of the menu, blocking hover and clicks.
As for the strange behavior you are getting when "inspecting", there is no magic there. Since bannerpromo2 is positioned relative to the bottom (it has bottom: 470px;), the position could be changing when you "inspect" it, because the developer panel opens from the bottom of your browser window, thus changing the bottom property of bannerpromo2.
If you want to see all of that in play, give bannerpromo2 a background color:
.bannerpromo2 {
background-color: green;
/* ...other props */
}
I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
I designed a navigation menu which looks like the image here:
I want to code it with css3 rounded corners and box-shadows, not using any images.
Problem is the rounded corner to the left of the first menu-item, and the one to the right of the menu... I call it a "reverse" rounded corner...
It should have to change color on :hover.
Is there any way to get this done in css only? And how?
HTML
<div class="menu">
<div class="outer_bg_left">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
<ul>
<li class="menu_item_cont"><div class="menu_item">Item 1</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 2</div></li>
<li class="menu_item_cont"><div class="menu_item">Item 3</div></li>
</ul>
<div class="outer_bg_right">
<div class="outer">
<div class="outer_shadow">
</div>
</div>
</div>
</div>
CSS
.outer_bg_left, .outer_bg_right {
float: left;
width: 70px;
background-color: #994;
height: 15px;
overflow: hidden;
position: relative;
z-index: 10;
}
.outer_bg_left .outer {
height: 25px;
border-radius: 0 10px 0 0;
background-color: #fff;
}
.outer_bg_right .outer {
height: 25px;
border-radius: 10px 0 0 0;
background-color: #fff;
}
.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {
box-shadow: 0 0 5px 2px rgba(0,0,0, .7) inset;
padding-bottom: 10px;
margin-bottom: -10px;
height: 25px;
}
.outer_bg_left .outer_shadow {
border-radius: 0 10px 0 0;
padding-left: 30px;
margin-left: -30px;
}
.outer_bg_right .outer_shadow {
border-radius: 10px 0px 0 0;
padding-right: 30px;
margin-right: -30px;
}
.menu_item_cont {
background-color: #994;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .7);
background-color: #994;
display: block;
float: left;
}
.menu_item {
border-radius: 0 0 10px 10px;
background-color: #994;
height: 20px;
padding: 5px 10px;
font-family: Arial;
line-height: 20px;
font-size: 14px;
font-weight: bold;
}
.menu_item:hover {
background-color: #000;
border-radius: 10px;
height: 30px;
line-height: 30px;
color: #fff;
}
http://jsfiddle.net/gXQzU/4/
It's just my first attempt, but I think it looks quite promising.