I have two <div>s surrounding an image in same row, but when I add the image the right <div> drops below.
I've tried float, display:inline-block and even styling the HTMLtags, but it didn't help.
Please help me out.
Here's my code:
<title>Hair by Michelle</title>
<body>
<div class="all">
<div class="navbar">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="hours">
<h1>Hours</h1>
<p>Tuesday: 12pm-7pm</p>
</br>
<p>Wednesday: 12pm-7pm</p>
</br>
<p>Thursday: 10am-7pm</p>
</br>
<p>Every other Saturday: 10am-7pm</p>
</div>
<div class="services">
<h1>Services</h1>
<h4>Women's Haircut $32</h4>
</br>
<h4>Men's Haircut $22</h4>
</br>
<h4>Full head color $50</h4>
</br>
<h4>Full highlights $70</h4>
</br>
<h4>Color toning $15</h4>
</br>
<h4>Facial waxing $12</h4>
</div>
</div>
Ignore the result area, just paste it in an editor.
if you want elements to line up in the same line should add:
float:left;
position:relative;
for the HTML I would recommend each image in a div:
.imgrow {
width:100px;
height:100px;
position:relative;
float:left;
}
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
I see just one image in your code...
If you need the text to be displayed next to the image, try this-
<div class="navbar">
<div style="float:left;">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
Related
I have a pricing plan page that I am trying to add a toggle switch to. I can't seem to figure out the proper way to vertically align the text of it: here is my fiddle
I've tried to set the margin and the padding but the Monthly and Annual are always at the top.
<div class="background">
<div class="container">
<div class="toggle-btn" style="background-color:transparent;text-align:center;position:relative;z-index:99;vertical-align:top;">
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Monthly</span>
<label class="switch" style="margin-bottom:15px;">
<input type="checkbox" id="checbox" onclick="check()" />
<span class="slider round"></span>
</label>
<span style="margin:0.8em;color:rgb(44, 46, 47);font-size:18px;bottom:0px;">Annual </span>
</div>
<div class="panel pricing-table">
<div class="pricing-plan">
<img src="https://s22.postimg.cc/8mv5gn7w1/paper-plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Personal</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Custom domains</li>
<li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
</ul>
<span class="pricing-price">Free</span>
Sign up
</div>
<div class="pricing-plan">
<img src="https://s28.postimg.cc/ju5bnc3x9/plane.png" alt="" class="pricing-img">
<h2 class="pricing-header">Small team</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Never sleeps</li>
<li class="pricing-features-item">Multiple workers for more powerful apps</li>
</ul>
<span class="pricing-price">$150</span>
Free trial
</div>
<div class="pricing-plan">
<img src="https://s21.postimg.cc/tpm0cge4n/space-ship.png" alt="" class="pricing-img">
<h2 class="pricing-header">Enterprise</h2>
<ul class="pricing-features">
<li class="pricing-features-item">Dedicated</li>
<li class="pricing-features-item">Simple horizontal scalability</li>
</ul>
<span class="pricing-price">$400</span>
Free trial
</div>
</div>
</div>
</div>
Remove the margin-bottom from that switch element and add display:flex;justify-content:center;align-items:center; to .toggle-btn
Here's the edited fiddle: https://jsfiddle.net/bjd3wps1/
you just had to add position: relative to the spans containing the text and than update the bottom value to bottom: -5px
here's the updated fiddle: https://jsfiddle.net/a2nwet54/
I'm having some issues to solve this problem with css selector. I need to select:
<li>
Asked to you
</li>
using nth-child selectors, but I don't have the ability to add classes. Do you have any idea how I can make this work? After I choose this element with nth-child I need to add:before pseudo selector to it.
I have this code
<div class="userAccountNavigation">
<div class="row">
<div class="large-3 small-3 column userProfileImage">
<img src="#" alt="" class="profile-image">
</div>
<div class="large-9 small-9 column">
<ul class="side-nav">
<li>
Profile
</li>
<li id="editProfile">
Edit Profile
</li>
</ul>
</div>
</div>
<div class="row">
<div class="large-12 small-6 columns">
<ul class="side-nav">
<li>
Activity Feed
</li>
<li>
Asked to you
</li>
<li class="active">
Following
</li>
</ul>
</div>
</div>
<div class="row">
<div class="large-12 small-6 columns">
<ul class="side-nav">
<li class="">
Questions
<span class="total">1</span>
</li>
<li class="">
Answers
<span class="total">0</span>
</li>
</ul>
</div>
</div>
</div>
Here is the solution to my problem. Thanks for checking anyway.
.userAccountNavigation div:nth-of-type(2) ul li:nth-child(2):before {
content: 'x';
}
In your example this should work.
.userAccountNavigation .row:nth-child(2) li:nth-child(2)::before{
content: "->";
}
https://codepen.io/Pamz/pen/wEqLgw
Two bullet points are flowing onto a second line needlessly.
"2 Users Free For Life" and "Up to 5 databases, including a Demo Database" both go into a second line which looks ugly and means the final bullet point almost sites on the "Show me the features" button.
You can visit the site at: http://www.workbooks.com/workbooks-instant-access
See:
The code is as follows:
<div id="pricing-list">
<div class="pricing-item" id="free-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Free Edition</h3>
<p class="desc-1">Get started right away with our free edition.</p>
<p class="desc-2">Free for up to 2 users</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Community Support Only</li>
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
</ul>
<p><a class="do-btn" href="/sign-up/workbooks-free-edition">Sign up to the FREE Edition</a></p>
</div>
<div class="r-col">
<ul class="features-list">
<li>
1 Database Only</li>
<li>
2 Users Free for Life</li>
<li>
Storage Limit</li>
</ul>
<br />
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="trial-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
30 Day Free Trial</h3>
<p class="desc-1">Access all features for 30 days. Unlimited users.</p>
<p class="desc-2">Full Feature Trial</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
<li>
Multi Currency</li>
</ul>
<a class="do-btn" href="/sign-up/workbooks-trial-edition">Trial the Business Edition</a></div>
<div class="r-col">
<ul class="features-list">
<li>
Telephone & Community Support</li>
<li>
Up to 5 databases, including a Demo Database</li>
<li>
Advanced Security</li>
</ul>
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="instant-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Instant Access</h3>
<p class="desc-1">Jump straight into our demo system</p>
</div>
<div class="right-part">
<div class="instant-access-bg">
<div class="l-col">
<ul class="features-list">
<li>
Log straight into a Demo System</li>
<li>
Get an instant feel for Workbooks</li>
</ul>
<a class="do-btn" href="http://content.workbooks.com/workbooks-instant-access">Access the demo instantly</a></div>
</div>
</div>
</div>
<div class="pricing-item" id="adv-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Speak to an advisor</h3>
<p class="desc-1">Speak right now to someone who can help</p>
</div>
<div class="right-part">
<div class="speak-to-an-advisor-bg">
<div class="l-col">
<ul class="features-list">
<li>
Ask any questions you have</li>
<li>
Find out which edition is right for you</li>
</ul>
<a class="do-btn" href="https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1" onclick="javascript:window.open('https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1','new_win','width=484,height=361');return false;" target="_blank">Start Online Chat</a></div>
</div>
</div>
<div class="h-line at-bottom">
</div>
</div>
</div>
<p> </p>
Anyone know what's going on?
You can fix this by adding white-space: nowrap; to .pricing-item .features-list li css class.
As seen below, I have 3 links inside a div with a class of "nav", and then 4 divs in a div with a class of "contact-info", each containing an image and some text.
Now for some reason, which I can't figure out, my divs inside "contact-info" are underlined and turn red when clicked, as if they would've been a link. This is even without giving it any css.
If anyone could look into my script and tell me what I'm doing wrong I'd greatly appreciate it.
<!DOCKTYPE html>
<html>
<head>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Log In</li>
<li><a href="#">Sign Up</li>
<li><a href="#">Contact Us</li>
</ul>
</div>
<div class="contact-info">
<div class="home">
<img id="home" src="images\home.png"/>
<p>Company Name<br></br>Company Address<br></br>City, State Zip</p>
</div>
<div class="phone">
<img id="phone" src="images\telephone.png"/>
<p>Phone Number</p>
</div>
<div class="fax">
<img id="fax" src="images\fax.png"/>
<p>Fax Number</p>
</div>
<div class="email">
<img id="email" src="images\email.png"/>
<p>Email Address</p>
</div>
</div>
</body>
</html>
You need to close the link tags like this
<li>Log In></li>
<li>Sign Up></li>
<li>Contact Us</li>
Hope this helps :)
Also, I just had another look at the code, and there is no need to close your break tags, just
<p>Company Name<br>Company Address<br>City, State Zip</p>
on its own Is fine, but I don't think it makes a real difference :)
I'm stuck with the CSS of following HTML link and want to expand the height of header image so I can adjust larger with it, but when I play with the CSS of the .header & .logo classes it expands the navigation bar also, I just really need to expand the height of the header image to have larger height logo into it.
Looking your html source seems you can have different solutions. Problem is with your html... You have
<div class="navigation">
inside
<div class="container">
Ans : get navigation div out of container div. Then changing the height of container div would be the best and not affect the height of your links.
Why you are getting problem : your header div is containing links inside it. That is why changing the height of header is not good (It simply changes the overall height of this div).
Update : Reply to your first comment on my answer
<div class="inner">
<div class="container">
<!-- Logo Start -->
<div class="five columns left">
<img src="images/logo.png" alt="" />
</div>
<!-- Logo End -->
<div class="eleven columns right">
<!-- Top Links Start -->
<ul class="top-links">
<li>
<h4 class="colr">Search Music</h4>
<div id="search-box">
<input name="" value="Enter any keyword"
onfocus="if(this.value=='Enter any keyword') {this.value='';}"
onblur="if(this.value=='') {this.value='Enter any keyword';}" type="text" class="bar" />
<button>Search</button>
</div>
</li>
<li>
LOG IN
<div id="login-box">
<h4 class="white backcolr">User Login </h4>
<ul>
<li>
<input name="" value="yourname#email.com"
onfocus="if(this.value=='yourname#email.com') {this.value='';}"
onblur="if(this.value=='') {this.value='yourname#email.com';}" type="text" class="bar" />
</li>
<li>
<input name="" value="password"
onfocus="if(this.value=='password') {this.value='';}"
onblur="if(this.value=='') {this.value='password';}" type="password" class="bar" />
</li>
<li>
<input type="checkbox" class="left" />
<p>Remember me</p>
Forget Password?
</li>
<li>
<button class="backcolrhover">Login</button>
</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
<!-- Top Links End -->
</div>
<div class="clear"></div>
</div>
<!-- Container End -->
<!-- Navigation Start -->
<div class="navigation">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul id="nav">
<li class="current-menu-item">Home</li>
<li>NEWS</li>
<li>Albums
<ul>
<li>Albums</li>
<li>Album Detail</li>
</ul>
</li>
<li>Blog
<ul>
<li>Blog</li>
<li>Blog Detail</li>
</ul>
</li>
<li>Gallery
<ul>
<li>Gallery - Two Column</li>
<li>Gallery - Three Column</li>
<li>Gallery - Four Column</li>
<li>Gallery - Slide Show</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
<li>BUY THIS THEME</li>
</ul>
<div class="clear"></div>
</div>
</div>
<!-- Navigation End -->
</div>
Then change your css and see the results
.container {
width:100%;
height:100px; /* I have changed it 50px to 100px*/
float:left;
margin-top:2px;
}
Change your header height here :
#header {
width:100%;
height:148px; <-----------Here
float:left;
position:relative;
z-index:2;
margin-bottom:15px;
box-shadow:0px 2px 2px #000;
background:url(../images/header.gif) repeat-x;
}
Edit: I just inspected with firebug, you are using multiple classes and you've nested div's, your logo div lies here
five columns left
I guess you've picked this template and you are trying to edit it right?