I feel like a moron having to ask this, but I have always evaded CSS at all costs, and as I now find myself needing it again, I have been scavenging Google for an example with no luck.
Basically I have icons specific to each category, and would like to create a horizontal nav bar in CSS/HTML using these, but also displaying a text link under them as well. I have found snippets for doing one or the other, but every time I try and combine the two together, the entire page seems to breakdown.
Can anyone provide an example of how this can be done? If it helps, it would basically look like...
[-IMAGE-] [-IMAGE-] [-IMAGE-]
[-TEXT-] [-TEXT-] [-TEXT-]
The effect can be easily get through background-position in CSS with proper padding-top applied to the li elements:
background-position: top;
padding-top: 50px; /* Height of image */
Here is an example fiddle.
Update:
Here is the more descriptive fiddle with different images on different li elements.
http://jsfiddle.net/LajUZ/2/
HTML:
<ul class="nav">
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
<li class="navitem">
<div class="icon">
[icon]
</div>
<div class="text">
[text]
</div>
</li>
</ul>
CSS:
.navitem
{
float: left;
}
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
The main structure I'm using is:
<div class="portfolio-thumbs">
<div class="col-md-4 thumb-item">
<a href="#">
<div class="thumb-img">
<img src="./img/portfolio/rocksea.jpg" class="img-responsive" />
<div class="thumb-overlay"></div>
</div>
</a>
</div>
...
</div>
I've created a full JS Fiddle here
I'm looking to add a semi-transparent overlay to the image (will later be adding transition and some content to slide in from bottom of each image), yet can't seem to get it to appear.
Have compared to couple of other articles on SO but none seemed to fit the bill.
I've done this a thousand times before, any idea what's going wrong with this?
With help of #ZachSaucier , adding 100% height to all elements in tree. Also adding:
div.latest-work div.portfolio-thumbs div.thumb-item a div.thumb-img div.thumb-overlay {
position: absolute;
top: 0;
}
Made the overlay sit on top of the img.
Updated fiddle here
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
I have modified my bootstrap skeleton top nav to this: http://jsfiddle.net/55dTU/
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">SketchFemme</a>
<div class="brand slogan">
<span>pencial mileage</span><br>
<span>one curve at a time</span>
</div>
<div class="container nav-collapse">
<ul class="nav">
<li>Artists</li>
<li>Onion Skin</li>
<li>News</li>
<li>About</li>
</ul>
<ul class="nav" id="account_corner">
homonolocus
<span class="divider">|</span>
Settings
<span class="divider">|</span>
Sign out
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Bootstrap .container sets the width to 1170px. Can someone please tell me why the .container.nav-collapse div can be nested inside .navbar-inner .container and somehow overlap the .brand and slogan? I would think since every instance of .container is the width of 1170px, that the .nav links would be forced into the next line instead of being on the same line as the brand and slogan.
My question isn't so much that I need something to be fixed. Rather I'm asking for an explanation of why this works. Why can one .container contain another .container, of the same width right on top of it. I was looking for a position:absolute which would allow that, but I don't find any. How does the ul.nav know where to indent?... there is no left padding and no left margin, and the containing element spans the entire width of the navbar. I want to know how this is being achieved.
I updated your fiddle ; I added
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
height: 1px; /* These */
clear:left;
}
It makes the container act like a real block: its display is set to block by default, but as its height was 0px, it didn't act like a block but rather as an inline-block.
The clear:left; also cancel any floating conflict (I put both in the fiddle without thinking, but hey, it's 6:30 am here in France).
Since you are using a responsive navbar, is there a reason why you aren't also using a responsive CSS file so the navbar collapses? I replaced your CSS file with
#import url('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
In the account_corner div you have ul but no list items. I replaced the ul with a plain div. Also, if you are following the example from http://twitter.github.io/bootstrap/components.html#navbar the div with your main links should have these classes
<div class="container nav-collapse">
Which partly answers your question.
This is the result http://jsfiddle.net/panchroma/ruAmz/ ?
Hope his helps get you closer to what you want!