 |
 |
|
||||||||
|
||||||||
02-07-2010, 09:01 PM
|
#1 |
|
Bronze Member
 
Join Date: Oct 2009
Location: Whitley Bay, UK
Posts: 43
|
Using div boxes as big link button, via CSS : How ?
I want to use text boxes, made using <div> tags into giant buttons, linking to other parts of my site
I would like a background color filling the entire div box, with 2 words att he most of text inside, aligned vertically and horizonally. Then, when the mose is hovered over, I want the whole div to chage background color Basically, I want a giant button. Later on I may want to change the color scheme, so don't want to bother of making graphics buttons. Updating a slight CSS change is, I am sure a much easier option ... although of course, at this stage I have never actually uploaded anything. I am using a simple text deditor (notepad ++) not a fancy WYSIWYG editor, such as Dreamweaver. Many many thanks for any advice offered 
|
|
|
|
02-07-2010, 09:07 PM
|
#2 |
|
Bronze Member
Join Date: Jan 2010
Location: Glasgow, Scotland
Posts: 29
|
<div id="big_button" onclick="location.href='http://www.yourlinkehere.com';" style="cursor
 ointer;"><p>your link text here</p> </div> then style it using css... #big_button { background:#ccc; } #big_button p { font-size:2em; color:#000; } etc. Last edited by northpark; 02-07-2010 at 09:15 PM. Reason: typos |
|
|
|
|
02-07-2010, 09:09 PM
|
#3 |
|
Bronze Member
Join Date: Jan 2010
Location: Glasgow, Scotland
Posts: 29
|
haha, the smily face thing should show as
: p with no space. Don't know how to stop it doing that |
|
|
|
|
02-08-2010, 04:07 PM
|
#4 |
|
Super Moderator
 Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,050
|
Not sure there is a solution to the favicon issue other than a space (: P). Funny though.
wbmkk, North parks solution will work fine, but bare in mind if you are using divs as buttons then you will need to use the onclick attribute and that require javascript. If someone has that disabled in their browser, you buttons will not work. Why not just use the anchor tag? It can be used as a block-level element just like a div. HTML Code:
<a href="http://www.example.com"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus, tortor sed placerat gravida, eros felis sollicitudin magna, sed congue lorem nisi at nulla. Maecenas venenatis eros sit amet diam molestie mattis. Quisque rutrum dictum velit sit amet ullamcorper. Integer faucibus dictum nisi eu facilisis. </a> Code:
a {
display:block;
width:300px;
height:auto;
padding:5px;
margin:0;
color:#555;
text-decoration:none;
background-color:#ccc;
}
a:hover {
background-color:#ddd;
}
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
|
02-08-2010, 04:20 PM
|
#5 |
|
Bronze Member
Join Date: Oct 2009
Location: Whitley Bay, UK
Posts: 43
|
Northpark
I was just trying your way but wasn't sure if / how I could change the colours, ie when the mouse moves over. I had started to write a reply, when I noticed PixelPusher had replied too. PixelPusher Brilliant ! that's what I wanted. I can just change the font etc to get what I want in my boxes I've been reading a bit about html and css, but kept clear of Javascript, so I wouldn't get confused (as if I'm not confused already) I assume I'll be able to manage to get several of my "super-buttons" on my page. Thanks again to both of you !! 
Last edited by wbmkk; 02-08-2010 at 04:23 PM. |
|
|
|
|
02-08-2010, 05:02 PM
|
#6 |
|
Super Moderator
Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,050
|
no problem you welcome.
You should not have any trouble getting multiple "super buttons" on your page. Just adjust the width as needed. Btw, if you are going to have multiple SBs together you can align them horizontally with an unordered list.
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
|
02-09-2010, 02:23 PM
|
#7 |
|
Silver Member
 Join Date: Mar 2009
Location: Stockholm, Sweden
Posts: 108
|
If you don't want to use the a attribute in the CSS or throw in java into the mixture, simply:
HTML: HTML Code:
<div class="bigassbutton" href="whateverpageyouwantto" > CLICK ME </div> HTML Code:
.bigassbutton {
height:300px;
width:300px;
background-color:CCC;
color:#000;
.bigassbutton:hover {
>>>Insert New CSS attributes<<<
}
.bigassbutton:action {
>>>Insert New CSS attributes<<<
}
|
|
|
|
|
02-10-2010, 03:40 PM
|
#8 |
|
Super Moderator
Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,050
|
mezangath,
your method may work, but it is not semantically correct. Href is not a valid attribute of the division tag. Plus, why use a div as an anchor when we have an anchor tag? That's the same as styling a paragraph tag as a heading.
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
 |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
