ravenshade Posted September 10, 2009 Share Posted September 10, 2009 I have three div tags two nested in the first. <div class="test"><div class="text1"><div><div class="text2"></div></div> Now, these have a CSS script attached to them... .test { margin: 150px auto; width: 600px; font-size: 100%; background: url(---url removed---) no-repeat bottom right;}.text1 { background: url(---url removed---) no-repeat top right; margin: 0; padding: 0px; text-align: center;}.text2 {background: url(---url removed---) no-repeat top left; margin: 0; padding: 10px 30px 5px; color: white; font-weight: bold; font-size: 1.2em; line-height: 0em;} Now, my problem is, is that I want to position the div tag that's inside the nest (text 1) Just a few pixels higher than the nest. With images it's possible by adjusting the line height or something similarOther than that, I've going to have to alter the template and a few dozen pages with a slight adjustment to the coding. Link to comment Share on other sites More sharing options...
ravenshade Posted September 10, 2009 Author Share Posted September 10, 2009 Found a solution that might work .text2 {margin-top: -10px;} lets see which browsers like that :)editAppears not to work actually... Link to comment Share on other sites More sharing options...
dsonesuk Posted September 10, 2009 Share Posted September 10, 2009 first problem, you don't have matching open and closed div tags. <div class="test"><div class="text1"><div><div class="text2"></div></div>should be:div class="test"><div class="text1"></div> <div class="text2"></div></div>or do you mean:div class="test"><div class="text1"><div class="text2"></div></div></div> Link to comment Share on other sites More sharing options...
ravenshade Posted September 10, 2009 Author Share Posted September 10, 2009 ...typo DX but yes the HTML is correct it's just the CSS I'm having problems with.ack you confused me... <div class="test"> <div class="text1> </div> <div class="text2> </div></div> ...(if the tabs show up, then I hope it makes it clearer) Link to comment Share on other sites More sharing options...
Ingolme Posted September 10, 2009 Share Posted September 10, 2009 You can give the <div> element a relative position and move it up a few pixels: .text1 { position: relative; bottom: 10px;} Link to comment Share on other sites More sharing options...
ravenshade Posted September 10, 2009 Author Share Posted September 10, 2009 Thanks, I'll go try that now. (It does sound stupidly simple, so who knows, it should work :) Normally I position everything absolutely, so I'm always using the position tag, however in the interests of creativity I stopped using the position syntax just to see what would happen. Maybe that wasn't the best idea. Link to comment Share on other sites More sharing options...
Ingolme Posted September 10, 2009 Share Posted September 10, 2009 I don't encourage the use of absolute positioning to lay out sites. It makes it very hard to get consistent results across browsers.To make layouts use float, margin and padding. Link to comment Share on other sites More sharing options...
ravenshade Posted September 11, 2009 Author Share Posted September 11, 2009 It appears to work, so I'll be replicating that across a few dozen CSS files...i was working around it by specifying each one but I no longer have to do that now. What a waste of css files...Float... i could never get to grip with the float syntax. It hates me. (Or rather I just don't know how to use it yet). Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.