PDA

View Full Version : Link Assistance Please !


spazzer
02-12-2010, 10:43 AM
Hi,
I have different size images to place in my links section of my site, I would like to insert divs to place the various link images into and float them side by side and also automatically center the images in the centre of the div , keeping them inline !, can anyone assist with this one please !

Cheers :confused:

spazzer
02-12-2010, 11:10 AM
Hi,
I have managed to centre the link images by using Margin:Left & Right Auto and Display:Block
How do I clear these images so that the next h2 tag stays beneath the floated images !, I have tried using a clearing div but this then pushes the h2 header down below my floated left navbar ?
I know its something simple can anyone help ! ;-)

tux
02-12-2010, 11:43 AM
Not brilliant with CSS but this may help. I'm sure others will be along with better advise soon.

You will have to put your own links and image paths in. I have left in borders so you can see whats happening.

Copy this to a new page and view it in a browser to see if its what you are after.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#wrapper{
width: 100%;
border: 1px;
border: 1px solid blue;;
}

#links_holder{
width: 500px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}

#links{
text-align: center;
}

</style>


</head>

<body>
<div id="wrapper">
<div id="links_holder">
<div id="links">
<a href="link1"><img src="Images/Buttons/button1.gif"></a>
<a href="link2"><img src="Images/Buttons/button2.gif"></a>
<a href="link3"><img src="Images/Buttons/button3.gif"></a>
<a href="link4"><img src="Images/Buttons/button4.gif"></a>
<a href="link5"><img src="Images/Buttons/button5.gif"></a>
<a href="link6"><img src="Images/Buttons/button6.gif"></a>
</div><!-- end links -->
</div><!-- end links_holder -->
<h2>Some stuff here!!!</h2>
</div><!-- end wrapper -->
</body>
</html>

Hope it helps, Paul

spazzer
02-12-2010, 12:35 PM
Thanks Paul,
Just off to Gym but will give it a go when I get back !

Many Thanks,
Nick C

spazzer
02-13-2010, 04:56 AM
Hi All,
Thanks for reply but it doesnt seem to work, let me explain, I have a Links section in my site and what I would like to do is be able to place text or an image for a link inside a box say 150 x 150 pixels so the image or text is centered within the div or box, then I would like to be able to place the divs side by side across the web page left to right, can anyone advise on best way to do this ?

Thanks,
Nick C :roll:

spazzer
02-13-2010, 06:08 AM
Hi,
Here is the code I have used ,is this how to do it, It looks ok when previewed in Firefox but if someone could someone check this I would really appreciate it as not sure its correct !

Many Thanks, Nick C

}
ul.link {
display: inline;
margin-top: 0px;
padding-top: 0px;
background-color: #999999;
overflow: hidden;
}
ul.link li {
float: left;
background-color: #996600;
}
ul.link a {
display: block;
width: 200px;
border: 1px solid #333333;
}
.linkLogowrapper {
overflow: hidden;
width: 750px;
}


<h2>Fishing Links</h2>
<div class="linkLogowrapper"><a href="#"><img src="../Assets/Images/Link Logos/go_fly_fishing_link_logo.jpg" class="linkLogo" /></a>
<ul class="link">
<li><a href="#">Rod License</a></li>
</ul>
</div>
<h2>Weather</h2>
<div class="linkLogowrapper">
<ul class="link">
<li><a href="#">BBC Weather</a></li>
<li><a href="#">Met Office</a></li>
<li><a href="#">Metcheck</a></li>
<li><a href="#">Weather Online</a></li>
<li><a href="#">ITV Weather</a></li>
</ul>
</div>

<h2>Downloads</h2>
<div class="linkLogowrapper">
<ul class="link">
<li><img src="../Assets/Images/Link Logos/160x41_Get_Flash_Player.jpg" /></li>
<li><img src="../Assets/Images/Link Logos/160x41_Get_Flash_Player.jpg" /></li>
<li><img src="../Assets/Images/Link Logos/160x41_Get_Flash_Player.jpg" /></li>
<li><img src="../Assets/Images/Link Logos/160x41_Get_Flash_Player.jpg" /></li>
</ul>
</div>

tux
02-13-2010, 09:58 AM
This gives a similar result but the links are in a div each.

Can you adapt this to what you need maybe.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#wrapper{
width: 100%;
border: 1px;
border: 1px solid blue;
text-align: center;
}

#links_holder{
width: auto;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
text-align: center;
}

#link{
width: 150px;
border: 1px solid black;
display: inline;
}

</style>


</head>

<body>
<div id="wrapper">
<div id="links_holder">

<div id="link"><a href="link1">link1</a></div><!-- end link1 -->
<div id="link"><a href="link1">link2</div><!-- end link2 -->
<div id="link"><a href="link1">link3</a></div><!-- end link3 -->
<div id="link"><a href="link1">link4</a></div><!-- end link4 -->
<div id="link"><a href="link1">link5</a></div><!-- end link5 -->
<div id="link"><a href="link1">link6</a></div><!-- end link6 -->

</div><!-- end links_holder -->
<h2>Some stuff here!!!</h2>
</div><!-- end wrapper -->
</body>
</html>

Corrosive
02-13-2010, 10:22 AM
Display inline should cover it but, if not, float the links/images left and they should line up neatly next to one another. I did this for someone else but I think the principal is the same;

http://corrosiveonline.co.uk/_projects/rennart/layout.html

spazzer
02-13-2010, 11:47 AM
Hi All,
Thanks again for all your help, I will put your knowledge to good use as always !
Just one other thing, when I first floated the images left the h2 tag below the floated images wrapped around the images, why did this happen and how can I clear the content in a div and stop the h2 tag below from wrapping !
The reason I ask is I have a left floated sidebar and when I insert a div tag with a clear left or both style the div clears to below the floated left sidebar.
I know its a simple answer as usual but wondered if you could help, I am quite close now to putting site on web for your expert analysis just want to get this right first !!!!!

Thanks,
;-)

spazzer
02-13-2010, 12:06 PM
Hi Corrosive,I notice in your HTML that there is no <p> tag around the text I've highlighted in Red !, can text be entered into a div without having a tag wrapped around it,I know the text is within a div tag but hadn't come across this before !

<div class="item">
<img src="scarfalexmcqueen.jpg (http://www.dreamweaverclub.com/forum/view-source:http://corrosiveonline.co.uk/_projects/rennart/scarfalexmcqueen.jpg)" title="A Scarf by Alex McQueen" alt="A Scarf by Alex McQueen" width="215" height="215">
<div class="description">This is a scarf by Alex McQueen Second line of description<br> Third line of description </div>

gentleone
02-13-2010, 12:31 PM
the h2 tag below the floated images wrapped around the images, why did this happen and how can I clear the content in a div and stop the h2 tag below from wrapping

Clear the h2 tag. I always have a couple standard rules in my CSS. One of them is the class 'clear'.
.clear {clear:both}

To clear your h2 tag.
<h2 class="clear">text</h2>

spazzer
02-13-2010, 06:35 PM
Hi,
The code is fine as long as all the links are the same size !,however I would like to place DIV's side by side approx 150 x 150 pixels and then be able to place an image or text in the center of the div so that if I have a differing height image (i.e. an image 120 x 50) the image will centre in the DIV or text !,the links will then flow from left to right in the centre of the DIV and will always follow after each other !
I'm assuming I need to create a .row Div but would appreciate some help please.
Also if I create a .clear style and then style the h2 tag the tag drops as before below the bottom of the left floated sidebar !

Thanks for your Patience