Is there a prettier and/or better way to align some a-elements in a nav to the right, while keeping others on the left, than using floats?
float:right moves the floated elements to the top of the nav instead of keeping them where they used to be, height-wise.
This has to be a common enough problem to have a good solution. clear:both;-divs or css to fix the damages aren't really pretty solutions.
This is basically the code I have.
<nav>
<!-- left-aligned -->
<img src="img/logo.svg" />
Foo
Bar
<!-- right-aligned -->
Potato
Tomato
</nav>
Add classes to your a's, like shown in html.
html:
<nav>
<!-- left-aligned -->
<a class="left" href="#"><img src="img/logo.svg" /></a>
<a class="left" href="#">Foo</a>
<a class="left" href="#">Bar</a>
<!-- right-aligned -->
<a class="right" href="#">Potato</a>
<a class="right" href="#">Tomato</a>
</nav>
and css:
nav .left {
float: left;
}
nav .right {
float: right;
}
Also, after you do that, and if doesn't work, you may want to make sure your nav's width is long enough, so they don't all scrunch together. Like nav { width: 100%; }
Related
I want to have multiple images on the same line with a caption below each image.
I can put images on the same line using the display:inline tag. When I add the figure tag, they are moved to different lines.
I tried multiple variation and can't get it to work.
Am I using the wrong tags for the job? I've seen this on other sites, but don't know how they do it.
CSS
section.products{
width: 100%;
padding:5px;
line-height:100%;
margin-top: 5px;
float: left;
text-align: center;
}
img.fans {
text-align: center;
max-width: 100%;
height: 50px;
width: 50px;
}
a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
p {
text-align:center;
align: center;
}
figure {
display:center;
}
ul.fans li{
display: inline;
}
HTML
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"</img>
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
You've got a couple things wrong.
You didn't close your image tags properly
you have in inline style of "float" which is not valid
This should help get you what you're looking for.
Css
ul.fans li {
display: inline-block;
}
figcaption {
text-align: center
}
Html
<section class="products">
<h1>Fans</h1>
<p>
<ul class="fans">
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded"/>
<figcaption>Shrouded</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img class="fans" src="http://placehold.it/300/300" alt="Shrouded" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</li>
</ul>
</p>
</section>
Codepen Example
with html 5 the proper way to put an image tag is like so
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" />
You dont need a tag because you never finished opening the tag, it seems like you are mixing the old way of doing things like this
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded"></img>
display inline will make the li act as if they are a p tag or any other inline element.
The reason they are going to new lines when you add a figcaption is because figcaptions are display: block. block display types will always push items to the next line. with css you can change the display types of items like you did with the li elements.The figure tag is also a block element.
when you write html please always indent when there is nesting (an element inside of another one)
Also the style="Float" is not valid css. anything in between the "" will be css and it is called inline css. It is best to not have css inline because it can cause problems when trying to change the css the majority of elements later on.
you can add css in the top of your document with the style tag. like so
<style type="text/css">
ul.fans li {
display: inline;
}
</style>
You will want to correct the closing tag and get the css in the right spot, and make sure you do not do inline css (style="float:left;").
Since stated from the answer before that you probably don't need a list for this because lists are for breaking into new line, you will probably want to do something like this instead
<style type="text/css">
.fans li{
display: inline;
}
.fans .captioned-image {
display:inline-block;
width:200px;
}
.fans figure {
width: 200px;
display:block;
text-align:center;
}
img {
max-width:200px;
}
</style>
<section class="products">
<h1>Fans</h1>
<p>
<div class="fans">
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shrouded</figcaption>
</figure>
</a>
</div>
<div class="captioned-image">
<a href="#">
<figure>
<img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="" />
<figcaption>Shallow Recess</figcaption>
</figure>
</a>
</div>
</div>
</p>
</section>
What is the best/standard way of positioning an image to the left and have two fields of text to the right of it? Using floats? Positioning?
<li>
<img src=""THUMB HERE />
TITLE
<span> META DATA </span>
</li>
This should be the result:
I'm not asking for a way to do it. I'm asking for the best way to do it with regards to cross browser compatibility and clean code.
Thanks!
Using floats.
<li>
<div style="float:left">
<img src=""THUMB HERE />
</div>
<div style="float:left;padding-left:10px">
TITLE
<span> META DATA </span>
</div>
<div style="clear:both">
</div>
</li>
The obvious solution would be floats:
Demo: http://jsfiddle.net/SO_AMK/wA8dj/
CSS:
li { display: inline-block; }
/* Keep it from being full width, if you define a width, skip this. */
li span.left { float: left; }
li span.right { float: right; }
Browser screenshots: http://imageshack.us/g/1/9808161/
The screenshots are of FX11, Chrome 18, Safari 5.1 and IE 8 & 9. In IE 7 the inline-block breaks and it becomes full width.
I am using Twitter Bootstrap. And i have used span8 and span 4 in a row. Is there anyway to remove the leading margin-left:20px from the first span of the row without needing to over ride it manually ?
That 20px margin you see on your #mainContent area is due to the setup of the bootstrap grid, which uses a container of 940px, it is supposed to be removed by the .row container with a margin-left:-20px property. In your setup, your content area is working just the way it was designed too, but your top pageHeader and mainNav sections are not appropriately inserted into the grid, you just have divs inside the .row top sections that are not being contained within the proper containers of the grid.
To fix this you can just insert all of your pageHeader and mainNav elements inside a .span12 container and everything should stack accordingly.
Fixed markup
<header class="row" id="pageHeader">
<div class="span12">
<div id="logo">Logo</div>
<div id="userDetails">userDetails</div>
</div>
</header>
<nav id="mainNav" class="row">
<div class="span12">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Blog</li>
<li>Idea Exchange</li>
</ul>
</div>
</nav>
Also, quick tip, you can switch your mainNav background color to the proper grid container of .span12 simply by targeting it like so:
nav#mainNav .span12 {
background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
height: 45px;
overflow: hidden;
}
you can add a class in your css with an !important:
example:
.no_margin{
margin:0px !important;
}
and add that class to your html when required.
(sorry for my bad english xD)
there is also small less utility at
http://getkickstrap.com/extras/#single-view
called flushspan
By using "row" or "row-fluid" class as parent of your span class
<div class="row">
<div class="span3">
<ul>
<li>Home</li>
<li>Dashboard</li>
<li>Blog</li>
<li>Idea Exchange</li>
</ul>
</div>
</div>
I do not know how to describe the problem, hence please visit the link.
In this (A), the white background is rendered nicely, but if I added
<!-- Problem here -->
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->
Then the page become (B), the white background disappears.
How do I solve the problem?
The problem is that all of the thumbnails are "floated." See the CSS "float" property. Floated elements do not take up page space. To fix that, you can use some sort of CSS "clearfix" after all of the thumbnails.
The quickfix for this is to add:
<br style="clear: both;" />
After all of your thumbnails.
Another option is something like:
.spacer
{
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
And then you can add:
<div class="spacer"></div>
Nowadays, crazy hip developers are using something like:
http://www.webtoolkit.info/css-clearfix.html
just add
<div style="clear: both;"> </div>
after the </ul>
The problem you are having has to do with your floated image elements. CSS can have difficulty calculating the height of a div that contains floated elements.
JUST Replace your current code with the below codes. It will 100% work
<style type="text/css">
.clearfix {
clear:both;
}
</style>
<ul class="thumb2"><li>
<a href="/malaysia/ceiling-lights/8044-f610-255" title="">
<img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>
I'm using CSS to create a header graphic:
#header {
height:125px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
then:
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is there a way to make the graphic (space above the nav UL) into a clickable link?
thx
I don't think this is a good approach. If you want only the graphic to be a link put in a separate element:
CSS :
#header{
height:125px;
}
#headerImg{
display:block;
height:100px;
background:url(/Content/images/header_footer.jpg) -0 0 no-repeat;
}
HTML :
<div id="header">
<span id="headerImg"></span>
<ul id="main_navigation">
Certainly: add a link tag. CSS is great at adding graphics and visual elements to pages, but if you want the page to do anything (e.g., to link somewhere) that has to be expressed somewhere in the HTML.
A common solution to what you're trying to do is to add an empty <a> tag, styled with a width and height that match the graphic you're using.
The above answers are correct in that you need an anchor tag in your HTML, but how that plays out depends entirely on what the image is that you are linking.
I don't see any reason to ever have an empty anchor tag. That's meaningless. Most likely you are either linking a logo or wordmark or site title or some combination. That should go in your HTML code, even if you plan to replace it with an image.
The first consideration is whether your header image itself is content or design. In the case of logos, it sometimes is content. In the case of site titles or wordmarks I would more often say the image is simply design, and the text is content.
For an image that is content in it's own right:
<div id="header">
<img src="logo.png" alt="My company">
<!-- navigation START -->
<ul id="main_navigation">
For an image that is replacing content:
<div id="header">
<h1>My Company</h1>
<!-- navigation START -->
<ul id="main_navigation">
and style:
#header h1 a {
display: block;
text-indent: -999em;
height: ??px;
background-image: url(path/to/image.png);
}
In either case, you have given semantic meaning to the area used as a link. I can't quite imagine a situation where you would want a meaningless link.
Keep everything the same, move the tags within the div so it validates. Add a class to the tag.
Class then is display:block and then height and width required. Job done, validating complete.
Erm, wouldn't this do it (or have I misunderstood?):
<div id="header">
You'll probably also want to add border:none to your #header
<a href="/whereever.php">
<div id="header">
<!-- navigation START -->
<ul id="main_navigation">
Is that what you wanted?
But I agree that the above answer is a better method
just do like this:
<div style=" height: 100px; background: url('logo.png')" >
<a href="/link" style="display: block; width: 100%; height: 100%" />
</div>
You can style your hyperlink attribute directly:
Example:
<a href="<your-link>" target="_blank" style="content: ''; width: 10px; height: 10px; background-image: url('<your-image-path>'); background-repeat: no-repeat; background-size: 10px 10px; display: flex">