positioning an image next to a menu bar with html/css - html

I am very new to html and css. I am trying to build my first website. I would like to have a picture on the same line as a nav bar, with the picture to the left. I first tried using some prewritten code for a drop down nav bar, but I was unable to position an image to the left of it. I tried some very basic code, but I still cannot figure our how to put a div (my image) next to a nav. I don't quite know when to use position and when to use float. My goal is simple to start. Get a div and nav to sit side-by side. Here is the html I am using to test:
<!DOCTYPE html>
<html>
<head>
<title>
Nav and div
</title>
<link rel="stylesheet" type="text/css" href="styleside.css">
</head>
<body>
<div>
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%">
</div>
<nav>
<ul>
<li>Home</li>
<li>Big Friendly Button</li>
<li>TARDIS</li>
</ul>
</nav>
</body>
</html>
Can Anyone point me to a starting place for how to move these elements around? Thank you!

<sytle> // Put this in css
.anynames{ // this css is for position an image to the left
position:relative;
float:left;
}
</sytle>
<div id="anynames"> //<---- Id this use to indicate specific DIV
<img src="images/basil.jpg" alt="picture here" height="20%" width="20%" />
</div>
If this is correct Mark it if this is not We Finds ways :D

There are two common methods of forcing two block (commonly div) elements to sit beside each other.
Floats
Floats are used to force elements to strictly align along the left or right of a page. However, they are also useful for placing two block elements beside one another:
div.image {
float: left;
}
nav {
float: left;
}
See this Fiddle
One key advantage floating elements over inline blocks is that floating elements don't have a default margin to space text (see Inline blocks section).
You can also change the code under nav to float: right; which will separate the image and nav on separate sides of the screen.
Inline blocks
Inline blocks are often used to display block elements inside a paragraph. But since two inline elements are placed beside each other given enough room, we can use these to position blocks horizontally:
div.image {
display: inline-block;
}
nav {
display: inline-block;
}
And the Fiddle.
In the Fiddle I've colored the nav red to show the space in between the two elements. If you did the same for the floating elements, you'll see no space between the image and the nav. However, here there is a small margin caused by the default spacing given to inline-block elements - the browser wants to put space between an inline element and the surrounding text. To get rid of the space, you must add
body {
font-size: 0;
}
nav {
font-size: 12pt;
}
Why would you want no spacing? We often want widths described in percentages. However, if you were to keep the spacing while specifying percentages that add up to 100%, the second element would spill over onto the next line because we didn't take the extra spacing into account: see this Fiddle.

Your two elements div and nav need to be formated in CSS. Like this:
<style>
.myDiv{
display:inline-block;
width:50%;
}
nav{
display:inline-block;
width:50%;
}
</style>
You must enter in a class for div to understand this code
<div class="myDiv">
The code inline-block will allow elements that are smaller then the remaining width of the page to be stacked beside it.
Hope this helps!

Related

Vertical-align works strangely (on cell-tabs)

I have a problem using the vertical-align:top; property on a cell-tab css content.
Here the picture : http://img4.hostingpics.net/pics/157625Capture.png
My HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style_test.css" />
<title>Test</title>
</head>
<body>
<div class='tableau'>
AAAA<img class='img1' src='images/drapeau_anglais.gif' />
<img class='img2' src='images/drapeau_anglais.gif' />
<span>BBBB</span>
<!-- This text lose the vertical-align:top; propertie because it is in the <span> => WHY ??? -->
<p>CCCC<img src='images/drapeau_anglais.gif' />DDDD</p>
<!-- As in the span, everything in my <p> loose it s vertical align propertie -->
</div>
</body>
</html>
My CSS code :
.tableau
{
display:table-cell;
border:1px solid black;
vertical-align:top;
}
.tableau p
{
display:inline-block;
}
.img1
{
/* I dont say anything here. img1 SHOULD be on top because of the ".tableau" class but it doesnt... why???*/
}
.img2
{
/* I force the vertical align on my image (but I shouldnt have to do that normally ?) But with this "trick" it works */
vertical-align:top;
}
Thanks a lot for your help !
I commend you for wanting to understand. The problem with vertical-align is that it doesn't take much HTML and CSS for there to be quite a lot going on. What we can do it to build the layout up piece by piece.
AAAA
This text is placed in a anonymous inline box. This goes in a line box, preceded by a zero-width inline box that's the height of the container element's font, called the strut. The strut and the AAAA text are vertically aligned with each other with respect to each others baseline. So already, we have
<img class='img1' src='...' />
The vertical-align of the .img1 element is the default which is baseline, and images are replaced inline elements, so the baseline of the image is its bottom margin edge. .img1 has no margins, border or padding, so that makes it the bottom edge of the image itself, so now, if we assume that the image is taller than the font, we have
Note that the line box is now taller than previously to accommodate the image. In fact the line box is taller than any of its component parts.
<img class='img2' src='...' /> part one
We'll skip the second image for the moment and come back to it later. We'll just leave a placeholder for now.
<span>BBBB</span>
Exactly as AAAA, except that here the inline box is formed from a real element rather than being anonymous. This gives us
CCCC<img src='...' />DDDD
This is exactly like AAAA<img src='...' />BBBB`. Nothing new to add here.
<p>CC...DD</p>
The p element is set to inline-block, which means that its line-height contribution to the line it is in is its margin box. It has default margins from the user agent stylesheet of (typically) 1em top and bottom. It too is aligned to the other elements on the line using its baseline. So now we have
Again the line box grows in height, this time to accommodate the p element's margin box.
<img class='img2' src='...' /> part two
Now we can fill in the placeholder we left earlier for .img2. This image is vertical align:top, so it doesn't align with the other elements, but with the top of the line box. So that gives us
.tableau { display:table-cell; vertical-align:top; }
Then the whole thing is wrapped up as one and positioned at the top of the table-cell.
Wrap up
Finally, we need to account for why "AAAA" appears at the top in your picture and not aligned to the other text as depicted in my answer above. This seems to be because you captured the picture from Chrome, and was therefore subjected to Chrome's screwy vertical-align implementation. Firefox and IE display the layout correctly.
With your vertial-align: top You mean about effect like here: http://jsfiddle.net/bdoq99a2/1/
I've simply changed this:
.tableau *{
display: inline;
}
Image: http://take.ms/BxlzD
The problem comes from the browser stylesheet, in this case the default margin for paragraphs. No need to fuss around with display: table-cell and vertical-align: top. Just check the fiddle: http://jsfiddle.net/bdoq99a2/2/
.tableau {
border:1px solid black;
}
.tableau p {
display: inline-block;
margin: 0;
}
<div class='tableau'>
AAAA<img class='img1' src='http://lorempixel.com/400/200/' />
<img class='img3' src='http://lorempixel.com/300/200/' />
<span>BBBB</span>
<p>CCCC<img src='http://lorempixel.com/300/200/' />DDDD</p>
</div>

Stretching <a> tags across a sidebar while vertically aligning its contents to the center

I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.

Some doubts about how make an image clickable using CSS

I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }

How to move an element down a litte bit in html

That sounds weird I know, but I am having trouble getting a piece of text to move down a tiny bit so it's centered on the tab it's on.
here's what it looks like:
I want buy to be centered vertically.
Here is the html:
<div class="row-2">
<ul>
<li>Buy</li>
</ul>
</div>
You can set the line height on the text, for example within the active class:
.active {
...
line-height: 2em;
....
}
<div class="row-2">
<ul>
<li><p style="margin-top: 10px;">Buy</p></li>
</ul>
Play with it
You can use vertical-align to move items vertically.
Example:
<div>This is an <span style="vertical-align: -20px;">example</span></div>
This will move the span containing the word 'example' downwards 20 pixels compared to the rest of the text.
The intended use for this property is to align elements of different height (e.g. images with different sizes) along a set line. vertical-align: top will for instance align all images on a line with the top of each image aligning with each other. vertical-align: middle will align all images so that the middle of the images align with each other, regardless of the height of each image.
You can see visual examples in this CodePen by Chris Coyier.
Hope that helps!
A simple way is to set line-height to the height of the element.
You can use the top margin-top and adjust the text or you could also use padding-top both would have similar visual effect in your case but actually both behave a bit differently.
Try it like this:
.row-2 ul li {
margin-top: 15px;
}
<style>
.row-2 UL LI A
{
margin-top: 10px; /* or whatever amount you need it to move down */
}
</style>
It's simple, just use:
<br />

Cannot make 3 column layout work within list for IE7

I am trying to create a liquid 3 column area within a list item. To achieve this, I use the standard method of having 3 elements, of which the first two are the sides, floated left and right, and the 3rd is the content, which should sit between the two. The following HTML works fine in Firefox, but doesn't render correctly in IE7 - the content is rendered below the two floated elements. Any ideas what the problem is?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*
{
margin: 0;
padding: 0;
border: 0;
}
span
{
display:block;
}
.corner
{
width: 12px;
height: 12px;
}
.tl
{
float: left;
}
.tr
{
float: right;
}
.fill
{
margin: 0px 12px;
}
</style>
</head>
<body>
<ul>
<li>
<span class="tl corner">a</span>
<span class="tr corner">b</span>
<span class="fill">text text text</span>
</li>
</ul>
</body>
</html>
Note that replacing the spans with divs results in the same effect. I've also tried various DocTypes with no luck. And it works fine outside of the list, hence the problem appears to be intrinsic to using the list.
The way IE sees it, you're trying to jam in the lines one after the other, but the first two have already taken up their space, FLOATing away, which leaves the last SPAN in the LI to fight for the next level, which in IE looks like the next level below.
Since the last SPAN is not floated, that's also why it gets knocked to the next level.
Also, SPANs are inline styles, not block level elements. You should replace SPAN with DIV is you still want to try and style this in a LI element.
You should also use a full DOCTYPE so the browsers will know how to render the page. Otherwise they will default to quirks mode, ugly and all over the place.
But the better tactic is to create this float of 3 columns outside of the LI and in a DIV setting.
Have a read of CSSplay or Max Design on creating 3 column layouts.
It's a bit difficult to say anything without seeing the markup, but why don't you just put the two elements which should float inside the content element? You would have to adjust with some padding on the content element, but that should do the job. Then again, not quite sure what you mean. If you supply us with a bit more markup, it would be easier to tell.
The center block should have margins to either side allowing room for the floated blocks.
The answer is to wrap the spans in a block level element (say, a div), with overflow set to hidden. Example came from a more in depth look at the 2nd CSSplay example.