niche Posted August 10, 2010 Share Posted August 10, 2010 I have <a> inside divs. The divs use a class where the width is set to 200px. I need the <a> tags with more width. The only way I've found to do that is to increase the width of all the divs in the class. I've tried inline styles, adding a width property to the <a> class, etc unsuccessfully.How do I change the width of just the <a> tags in this situation?: <style type="text/css">body{font-family:arial;}a.three{color:blue;font-size:70%;text-decoration:none;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one { color:blue; font-size:175%; width:200px; float:left; margin:10px: margin-right: 30px}</style></head><body><?phpecho '<div><img class="logo" alt="savebot logo" src="savebop6.png" /><div>';echo '<div style="clear:both;"></div>';echo '<div style="margin-left:30px;">';echo '<div class="one">View All Bops</div>';echo '<div class="one"><a class="three" href="newest1st.php">Newest First</a></div>';echo '<div class="one"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>';echo '<div class="one"><a class="three" href="newest1st.php">Most Money Off</a></div>';echo '</div>';?></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted August 10, 2010 Share Posted August 10, 2010 trying setting the <a> to display:block and then try the width setting again. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 10, 2010 Share Posted August 10, 2010 trying setting the <a> to display:block and then try the width setting again.Or inline-block. Might work better depending on what you need to do. Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 That was unexpected. I also added:margin-top:6px; with the width:400px;. The margin-top:6px;took effect, but the width:400px; didn't.Here's the actual change: a.three{display:block;color:blue;font-size:70%;text-decoration:none;margin-top:6px;width:400px;} Link to comment Share on other sites More sharing options...
ShadowMage Posted August 10, 2010 Share Posted August 10, 2010 That was unexpected. I also added:margin-top:6px; with the width:400px;. The margin-top:6px;took effect, but the width:400px; didn't.How do know it didn't work? What actually happened? If this anchor is supposed to expand beyond the div containing it, you might need to give overflow: visible to the div. Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Still no joy (nothing moved). Current css: <style type="text/css">body{font-family:arial;}a.three{display:inline-block;color:blue;font-size:70%;text-decoration:none;margin-top:6px;width:400px;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one { color:blue; font-size:175%; width:200px; float:left; margin:10px: margin-right: 30px; overflow:visible;}</style> Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Yes the <a> would be wider than the <div>. I added overflow:visible; to the div and none of the elements moved. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 10, 2010 Share Posted August 10, 2010 Yes the <a> would be wider than the <div>. I added overflow:visible; to the div and none of the elements moved.What do you mean nothing moved? What exactly is it you're trying to accomplish? I guess I'm a little confused here. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 correct margin:10px:should be margin:10px; Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 That simplies the question.ShadowMage , I need a small margin between "View All Bops" and "Newest First" and much larger margins between "Newest First" , "Biggest Percent Off" and "Most Money Off".This css adjusts <a> when its width is smaller than the div, but won't let the <a> exceed the width of the div class. <style type="text/css">body{font-family:arial;}a.three{display:block;color:blue;font-size:70%;text-decoration:none;margin-top:6px;width:100px;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one { color:blue; font-size:175%; width:300px; float:left; margin:10px; margin-right: 30px; overflow:visible;}</style> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 making the anchor wider does not seem to work, the parent div fixed width restricts the anchor it to its width. if you look at the anchors in firebug they seem to merge into each other. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 10, 2010 Share Posted August 10, 2010 Perhaps instead of width: 200px you may want min-width: 200pxThat should let the div expand, but it will never be smaller than 200px. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 <style type="text/css">body{font-family:arial;}.small_margin{margin:0 10px;}.large_margin{margin:0 30px;}a.three{display:block;color:blue;font-size:70%;text-decoration:none;margin-top:6px;width:400px;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one {color:blue;font-size:175%;width:200px;min-width:200px;float:left;margin:10px;margin-right: 30px;overflow:visible;}</style></head><body><?phpecho '<div><img class="logo" alt="savebot logo" src="savebop6.png" /><div>';echo '<div style="clear:both;"></div>';echo '<div style="margin-left:30px;">';echo '<div class="one small_margin">View All Bops</div>';echo '<div class="one small_margin"><a class="three" href="newest1st.php">Newest First</a></div>';echo '<div class="one large_margin"><a class="three" href="newest1st.php">Biggest Percent Off</a></div>';echo '<div class="one large_margin"><a class="three" href="newest1st.php">Most Money Off</a></div>';echo '</div>';?></body></html> Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Please send link for firebug.Moving on, that's what I was afraid of. Is there a way to get <a> to exceed the width of divs maybe by deleting most of the divs. The only reason they're there is because I couldn't think of a way to float dissimilar tags.How can I rewrite this in a way that uses float, and puts a 30px margin between the first element, that has a width of 200px, and the left browser edge, 10px margin the next 3 elements, that have a width of 300px? Based on something like this: echo '<div class="one">View All Bops</div>';echo '<a class="three" href="newest1st.php">Newest First</a>';echo '<a class="three" href="newest1st.php">Biggest Percent Off</a>';echo '<a class="three" href="newest1st.php">Most Money Off</a>'; Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 <style type="text/css">body{font-family:arial;}#outer{margin-left:30px; overflow:auto;}a.three{display:block; color:blue; font-size:70%; text-decoration:none; margin: 10px; width:300px; float:left;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one {color:blue;font-size:175%;width:200px;float:left;margin: 10px;}</style></head><body><?phpecho '<div id="outer">';echo '<div class="one">View All Bops</div>';echo '<a class="three" href="newest1st.php">Newest First</a>';echo '<a class="three" href="newest1st.php">Biggest Percent Off</a>';echo '<a class="three" href="newest1st.php">Most Money Off</a>';echo '</div>';?></body></html>Edit add overflow:auto; to #outer Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 I worked with dsonesuk's small and large margins and couldn't get them to respond by changing their values. So, I deleted them and found that the browser appeared the same with and without them.Damm, it sure looked like the right answer.Surely, there's a way to put margins with different values between different elements in a float? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 sorry my bad! i should have placed small_margin and large css below div.one they would change then revert to div.one marginsshould be<style type="text/css">body{font-family:arial;}a.three{display:block;color:blue;font-size:70%;text-decoration:none;margin-top:6px;width:400px;}a.three:visited {color:blue;}a.three:hover {color:red;}div.one {color:blue;font-size:175%;width:200px;min-width:200px;float:left;margin:10px;margin-right: 30px;overflow:visible;}.small_margin{margin:0 10px;}.large_margin{margin:0 30px;}</style> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 My bad, Again! doing well here, you will have to remove the margin setting in div.one OR assign !important to new classes.small_margin{margin:0 10px !important;}.large_margin{margin:0 30px !important;} Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Regarding the small and large margins, I still can't get them to work. Changing their values, or deleting them doesn't effect the display . Is that the result that you get? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 read my previous post explains all.just realised its a Friday 13th week Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Now we're cooking with gas!A few questions:1. RE: .large_margin{margin:0 60px !important;} - The zero sets the top and bottom margins to 0?2. RE: !important - Link for documentation?3. What was your thinking behind the script with the id #outer? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2010 Share Posted August 10, 2010 1) .large_margin{margin:0 60px !important;} (top/bottom = 0, left/right=60px) will take precedence over the margin settings in div.one, you can target specific margin as well ie margin-top: 10px !important; will only affect the top margin set by div.one2) What does !important mean in CSS?3) i like to keep group of relating elements together, in their own container, like you would with elements for header content in a header container, menu elements in menu container, content elements in content container, you can set, and identify the boundaries of the containers, and can work with the child elements within the parent container. this way you can identify problems between child elements within specific parent element.EDIT: I must point out one problem with using !important and that is IE6 does not recognise !important and will use div.one settings. that why it is used as a hack to apply different settings to IE6 than other browsers in the same css selector you can have a{margin: 20px 10px !important; margin: 10px 20px;}all other browsers will use margin: 20px 10px; IE6 will use margin: 10px 20px; Link to comment Share on other sites More sharing options...
niche Posted August 10, 2010 Author Share Posted August 10, 2010 Thanks to everyone that helped me on this topic especially thescientist, ShadowMage, and dsonesuk. This topic covered a lot of ground and significantly increased my understanding of float and a few other unintended issues that seem to always connect with every good topic.Thank-you Very Much,Niche Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.