PDA

View Full Version : Div positioning



martynball
Jul 15th, 2010, 11:38 PM
I have a problem getting these four buttons to align properly, as if I put display:inline; the height and width values are ignored... (class: button1)
http://i58.photobucket.com/albums/g268/martynball/inline.jpg

As you can see here when I hover over each element the padding and margin ect is highlighted on the element. Also, the <a href... is not wrapping around the button, but instead going across the screen (pink).
http://i58.photobucket.com/albums/g268/martynball/positioning.jpg

CSS:


.up_records {
padding:0.2em 0.2em 0.2em 2.4em;
background-image:url(images/buttons.png);
background-position:0px -192px;
width:25px;
height:26px;
display:inline;
}
.del_records {
padding:0.2em 0.2em 0.5em 2.4em;
background-image:url(images/buttons.png);
background-position:0px -272px;
width:25px;
height:26px;
display:inline;
}
.new_ani {
padding:0.2em 0.2em 0.3em 2.4em;
background-image:url(images/buttons.png);
background-position:0px -218px;
width:25px;
height:26px;
display:inline;
}
.view_rec {
padding:0.2em 0.2em 0.2em 2.4em;
background-image:url(images/buttons.png);
background-position:0px -245px;
width:25px;
height:26px;
display:inline;
}
.body {
text-align:center;
}
.body a {
text-decoration:none;
color:#999999;
}
.button1 {
height:48px;
width:191px;
background-image:url(images/buttons.png);
background-position:0px -48px;
line-height:280%;
text-align:left;
padding-left:5px;
cursor:pointer;
margin:0em 1em;
display:inline;
}
.button1:hover {
height:48px;
width:191px;
background-image:url(images/buttons.png);
line-height:280%;
text-align:left;
padding-left:5px;
cursor:pointer;
background-position:0px 0px;
color:#FFFFFF;
}


HTML:


<div class="body">
<a href="#">
<div class="button1">
<div class="up_records">Update Records</div>
</div>
</a>
<a href="#">
<div class="button1">
<div class="del_records">Delete Records</div>
</div>
</a>
<a href="#">
<div class="button1">
<div class="new_ani">New Animal</div>
</div>
</a>
<a href="#">
<div class="button1">
<div class="view_rec">View Records</div>
</div>
</a>
</div>

VIPStephan
Jul 16th, 2010, 01:12 AM
As you’ve correctly noted elements that are displayed inline are ignoring height and width values. Additionally, top and bottom margins and paddings are interpreted differently; in most browsers they are added but don’t necessarily change anything around that element.

The first problem I see in your code is that you are nesting divs inside anchors which is resulting in invalid code. An anchor is an inline element by default and divs are block-level elements. You can’t put block elements inside inline elements. Either make it vice versa or change the divs to spans.

Secondly: Assuming you have spans rather than divs inside the anchors you should float the buttons (anchors) and make the spans inside display as block elements. Floated elements can have a width and height and make the following content go next to it. But don’t forget to clear the content that’s supposed to continue below the floated elements.

Actually, you know what? Now that I look at it, you don’t even need all these useless elemenst inside the anchors. You can either combine the icon and the button background for each image and then have four anchors only (looks like you’re using sprites already which is good):


<a class="button1 update" href="">Update records</a>
<a class="button1 delete" href="">Delete records</a>
<a class="button1 new" href="">New animal</a>
<a class="button1 view" href="">View records</a>



.button1 {
float: left;
background: url(images/buttons.png) no-repeat;
[width/height/whatever additional styles]
}
.update {background-position: ???;}
.delete {background-position: ???;}
.new {background-position: ???;}
.view {background-position: ???;}


Or, if you want to be flexible, have the anchors with one span inside and assign the button background (without icon) to the anchor and the specific icon to each button’s span inside (along with appropriate padding etc.).

martynball
Jul 16th, 2010, 01:23 AM
So like so:

CSS:


.button1 {
height:48px;
width:191px;
background-image:url(images/buttons.png);
background-position:0px -48px;
line-height:280%;
text-align:left;
padding-left:5px;
cursor:pointer;
margin:0em 1em;
display:block;
float:left;
}
.button1:hover {
background-position:0px 0px;
color:#FFFFFF;
}


HTML:


<div class="body">
<a href="#">
<span class="button1">
<span class="up_records">Update Records</span>
</span>
</a>
<a href="#">
<span class="button1">
<span class="del_records">Delete Records</span>
</span>
</a>
<a href="#">
<span class="button1">
<span class="new_ani">New Animal</span>
</span>
</a>
<a href="#">
<span class="button1">
<span class="view_rec">View Records</span>
</span>
</a>
</div>


it works, but only problem now is that the button's arnt centred.

martynball
Jul 16th, 2010, 01:47 AM
Only problem now is that I can't align them to the centre :/