PDA

View Full Version : spacing given to elements when not required



SimonBloodworth
Oct 17th, 2008, 03:56 PM
hi
i have this issue on and off for a while and wondered if any one could tell me how to get round it?

If i for instance style a H1 for a header and wish to then display maybe a <p> style next to it keeps pushing the text down a line?

I set all padding and margin to 0 yet some strange force keeps moving my text!

Any help please?

regards

Simon

abduraooft
Oct 17th, 2008, 04:17 PM
Post your code or better a link. Please use
][/COLOR] tags to wrap your code while posting here.

PS: welcome to CF :)

SimonBloodworth
Oct 17th, 2008, 04:29 PM
html/asp code and css below:

slightly more descriptive.

Your see that essentiall i will have a title and next to the title will be 2 available links, now i would like these links to be on the same line but of course styled slightly differently, but keeps adding like some sort of invisible ling break and pushing them down a line!

Any help is appreciated!




#OptionBox {
border: 1px solid #FFFFFF;
width: 400px;}

#OptionBox H1 {
display: block;
background-color: #FFFFFF;
font-family: verdana;
font-size: 13px;
}

#OptionBox H2 {
font-family: verdana;
font-size: 12px;
color: #FFFFFF;
padding: 0px;
margin: 0px;

}

#OptionBox H4 {
font-family: verdana;
font-size: 9px;
color: #CCCCCC;
padding: 0px;
margin: 0px;
}

#OptionBox p {
font-family: verdana;
font-size: 11px;
color: #FFFFFF;
padding: 0px;
margin: 0px;
}

#OptionBox a:link {
font-family: verdana;
font-size: 9px;
color: #CCCCCC;
padding: 0px;
margin: 0px;
text-decoration: none;

}

#OptionBox a:visited {
font-family: verdana;
font-size: 9px;
color: #CCCCCC;
padding: 0px;
margin: 0px;
text-decoration: none;

}

#OptionBox a:hover {
font-family: verdana;
font-size: 9px;
color: #CCCCCC;
padding: 0px;
margin: 0px;
text-decoration: underline;

}

#OptionBox a:active {
font-family: verdana;
font-size: 9px;
color: #CCCCCC;
padding: 0px;
margin: 0px;
text-decoration: none;

}




<div id="OptionBox">
<h1>Add/Edit Menus</h1>
<p>You currently have <%=(RsDetails.Fields.Item("RMenuCount").Value)%> active menu/s </p>
<p>The menus currently set are:</p>

<%
While ((Repeat1__numRows <> 0) AND (NOT RsMenus.EOF))
%>
<h2><%=(RsMenus.Fields.Item("MenuType").Value)%></h2><a href="../RTE/add_menu.asp?ID=<%=(RsMenus.Fields.Item("RID").Value)%>&M=<%=(RsMenus.Fields.Item("MID").Value)%>">Edit This Menu &gt;&gt;</a><p>:</p> <a href="s">Delete This Menu</a>
&gt;&gt;
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
RsMenus.MoveNext()
Wend
%>
<p></p>
</div>

itsallkizza
Oct 17th, 2008, 04:31 PM
I'm sure you already know this but just in case, <p> is a block element and by default begins a new line.

If you want the <p> to appear next to the <h1> (which is also a block element) then you can do something like:



<h1 style="float:left;">Header on the left</h1> <p style="float:left;">Some text right next to it</p>


If they aren't the same font size, you're going to have an issue with vertical alignment though. If you know the exact font-size in px/pt of both the h1 and p then you can just use padding-top to bump the smaller element down.

SimonBloodworth
Oct 17th, 2008, 04:35 PM
i didnt know that about it being a block element, still getting to grips with css fully. My only issue that of course <p> is controlling the main text element of the container and as such will affect them. Would it make sense to create a specific class for the link text?

itsallkizza
Oct 17th, 2008, 04:40 PM
looks like we posted at the same time :)

ya, so you can do a number of things to override that line break. the best option i can think of right now is what i wrote above.

you can also do it this way, it's a bit less finicky but i don't recommend it because it's horribly incorrect semantically speaking:



<h1 style="font-size:24px;">Header on the left <span style="vertical-align:baseline;font-size: 12px;">Some text right next to it</span></h1>


another idea would be to use two inline elements side by side. the only downside of this is you lose your header tag (which doesn't matter if you only care about the look and not the code).



<span style="font-size:24px;font-weight:bold;">Header on the left</span> <span style="font-size: 12px;">Some text right next to it</span>

itsallkizza
Oct 17th, 2008, 04:45 PM
It's a good rule of thumb to always externalize your style code (ie use classes and define them in a .css file), this is especially true when you're going to be repeating similarly styled elements. Legitimate exceptions to this are cases where your css code is purely functional (eg hiding a form with style="display:none" for scripting purposes).

It's still early in the morning so bear with me ;)... but can you explain exactly what the your requirements are? Are you wanting it to simply be a header with 2 links to the right inside of a <p> tag?

SimonBloodworth
Oct 17th, 2008, 04:47 PM
hi

i simply fixed the problem by removing the <p> element from within the links - it was only there to style the colon and nothing else. So also adjusted the padding on the H2 to bring it in line with the links and is all looking great.

many thanks for your help....................I may be back!

regards

itsallkizza
Oct 17th, 2008, 04:49 PM
glad you got it working :)

hopefully next time i can be of more help lol

if you want to style the colon, just add a <span class="colon_style">:</span> to your asp code. That won't insert a new line.