I have written a text inside h2 and next to that i want to show a tabbed navigation but that tabbed navugation is not being placed next to it ,its going below h2 as shown in following image inside that gray box:
Following is my code for html page:
<header>
<h2>
Corporate
jobpost
</h2>
<div id='tabjob'>
<ul>
<li>
<a class='innertab selectprofile' href='#YourJobposts'>Your Jobposts</a>
</li>
<li>
<a class='innertab signupprofile' href='#OtherJobposts'>Other Jobposts</a>
</li>
<li>
<a class='innertab signupprofile' href='#Appliedfor'>Applied for</a>
</li>
</ul>
</div>
</header>
header is the thing which is in gray color in the image.Inside this header i want to show text ,next to that tabbed navigation and at the corner that button
Following is my CSS for this tabbed navigation:
#tabjob
{
padding-top:0px;
padding-left:10px;
height:0px;
}
.innertab
{
background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px;
line-height: 30px;text-align: center;
width: auto;float: left;font-weight: bold;
padding-left: 8px;
padding-right: 8px;
text-shadow: #eee 0px 0px 2px;
}
#tabjob ul li
{
display:block;
}
I have already posted the answer in comments just adding the details of the answer here.
DEMO is HERE
since your h2 tag and all heading tags are block element in HTML it take the complete width available.
so to avoid h2 tag to take complete width just add {float:left} to this element
Make sure you apply this style to specific h2 only otherwise your HTML will mess up. is you have used more than one h2 tags on the page.
HTML
<h2 class="floatTag">Corporate jobpost</h2>
<div id='tabjob'>
<ul>
<li>
<a class='innertab ' href='#YourJobposts'>Your Jobposts</a>
</li>
<li>
<a class='innertab ' href='#OtherJobposts'>Other Jobposts</a>
</li>
<li>
<a class='innertab ' href='#Appliedfor'>Applied for</a>
</li>
</ul>
</div>
CSS
#tabjob
{
padding-top:0px;
padding-left:10px;
height:0px;
}
.innertab
{
background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px;
line-height: 30px;text-align: center;
width: auto;float: left;font-weight: bold;
padding-left: 8px;
padding-right: 8px;
text-shadow: #eee 0px 0px 2px;
}
#tabjob ul li
{
display:block;
}
h2.floatTag{float:left;}
Use display:inline-block for both the h2 and the tabjob:
h2, #tabjob { display: inline-block }
Demo: http://dabblet.com/gist/2774902
ul and div are block elements which means they always go below whatever is before them:
a<div>x</div>
would give you two lines. Try
a<div style='display: inline'>x</div>
Related
I'm building a list widget where I have multiple <li> with two sibling elements wrapped inside.
A <span> for the title and a <div> for the bottom line. That line must vary depending the width of their adjacent span element.
.limit-area {
width: 250px;
height: 350px;
background-color: #96ceb4;
}
.limit-area ul {
font-size: 0;
list-style-type: none;
-webkit-padding-start: 0;
}
.limit-area ul li {
background-color: #ffeead;
display: table;
margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
font-size: 24px;
color: #010101;
}
.limit-area ul li .wrapper .line {
height: 6px;
margin-top: 12px;
background-color: #ff6f69;
}
<div class="limit-area">
<ul>
<li>
<div class="wrapper">
<span>One line only</span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Bigger one line only </span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Long line and go crazyyyyyy</span>
<div class="line"></div>
</div>
</li>
</ul>
</div>
Full example on jsfiddle: https://jsfiddle.net/arnauth/55josw6e/
In the upper example, I can easily accomplish my goal on the first two list items.
The trick here is to have the same effect when I have a long line that break into two or more lines - that third line on the example.
The line element must have the same width of the text, so in the example must stop near the word 'go' - not in the end of the container as displayed.
The idea is try to approach the problem using only CSS rules avoiding javascript based code.
Thanks for your attention.
Try adding this inside of your span:
border-bottom: 6px solid #ff6f69;
so that it ends up looking like this:
span {
font-size: 24px;
color: #010101;
border-bottom: 6px solid #ff6f69;
}
it should come out like this
https://jsfiddle.net/55josw6e/3/
Hope this answers your question.
I have a weird problem where my links work fine on one page or fail to do so on another. Here is my code for the non-working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
And the code for the working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
<a class="activeLink" href="side2.html">ABOUT US</a>
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
I am able to see the links fine, but they are not clickable.
Here is the CSS for the nav, ul and wrapper:
nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}
EDIT: I figured out the issue. I had a div overlapping my ul.
FIDDLE
The # would normally reference an anchor on your page and scroll there. Since you are just using the # it links to itself, so the page wouldn't reload, and would stay in the same place.
Your CSS also specifies not to decorate (underline) the hyperlinks, giving the impression that the link does nothing.
Edit: http://jsfiddle.net/2L3hL7w6/
I've added some CSS to highlight in red if a link has been visited - you'll see if you click on one of your links on the page it changes to red, showing the link does in fact work.
nav a:visited {
color: #ff0000;
}
All the links are the same in your example code. So when you once clicked one link....nothing more will happen since you are already there.
I am trying to position a text in the middle height of an image, but the margin-top or margin-bottom would not work as I want.
Any tips on this?
I created an JsFiddle to show the work -
http://jsfiddle.net/HdW7Y/1/
As you see the the text Login User is below the login button.
HTML
<div id="topNav">
<ul>
<li class="topMenu-bg1 show_hide_contact">
</li>
<li class="topMenu-bg2 show_hide_login">
User Login</p>
</li>
</ul>
</div>
CSS
#topNav li {
margin-top:5px;
padding-top:7px;
list-style:none;
float:left;
border-right:1px solid black;
}
.icon2text{
font-weight: bold;
font-size: 0.7em;
display: inline;
}
You can use the vertical-align property on .icon2text and set it to top:
http://jsfiddle.net/HdW7Y/2/
Add
.topMenu-bg2 show_hide_login{
valign:middle;
}
If you replace the p tag with a span and remove the top padding from the li item and the top padding from the a tag it should all line up.
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}