Ulterior Posted June 13, 2012 Share Posted June 13, 2012 I am trying to get some text and images placed in a certain way on my page, I've put the text into boxes and floated them left and bottom left, but I cant get the images to float right, unless I use absolute positioning, which seems to place it differently on other computers which isn't what I want. How should I go about putting content on my pages, I mean for instance in Visual studio, the boxes I placed don't seem to go under one another, rather they place right next to it, It's all just a mess. The google maps I have put on the page seems to always place itself outside of my division which I don't understand at all, same with the logo. I'm starting to wonder whether I should just stop using boxes to place my content. I've read about how your elements need to be within the 'flow' of the page and stuff, and not to use absolute positioning, but I've found float right: seems to just mean sit below the rest of the content and drag everything else on page around it. Is there a better way of doing this? Link to comment Share on other sites More sharing options...
niche Posted June 13, 2012 Share Posted June 13, 2012 What are boxes? Divs? PLease post a sample of your code. Link to comment Share on other sites More sharing options...
Ulterior Posted June 13, 2012 Author Share Posted June 13, 2012 What are boxes? Divs? PLease post a sample of your code. <div id="content"><div class="box6"><!--BOX STARTS--><h2 class="boxtitle5"><b>*****</b></h2><p>****</p><p>******</p><p>*****</p><p style="margin-bottom: 1em;">**************</p> <p></p></div><!--BOX ENDS--> Yeah kinda I guess. I just place all my content like this above right now and the CSS for example: .box8{ float: top-right; /*floats left*/ width: 333px; /*adds a fixed width*/ padding-top: 50px;text-align: justify; font-size: 12px;color: #2c2c2c /* margin-bottom: 15px; /*adds a bottom margin*/} And yes I do know that this is for box 8 and above I used box6 ;p, this is just an example. Link to comment Share on other sites More sharing options...
niche Posted June 13, 2012 Share Posted June 13, 2012 (edited) everything in your box8 class will float right unless you tell a tag (inside that class) to float left. What specifically do you want to float left in the code you posted? Also, top-right is not a property value for float. Use float:right; Edited June 13, 2012 by niche Link to comment Share on other sites More sharing options...
Ingolme Posted June 13, 2012 Share Posted June 13, 2012 There isn't any value "top-right" for the float property. There are three possible values for float: "left," "right," and "none." Link to comment Share on other sites More sharing options...
roabecker Posted June 13, 2012 Share Posted June 13, 2012 Also you're commenting out margin-bottom. I don't know if you meant this, just a heads up. Link to comment Share on other sites More sharing options...
Ulterior Posted June 13, 2012 Author Share Posted June 13, 2012 (edited) Ah thanks for the heads up on the float issue. What I'm trying to get my content + footer area like is this: ....Title..............................########texttexttexttext...................[............]........................................[.............]....Title..............................[............]textxtxtxtxtxtxtx....................####### Logo (twitter logo + link)~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~footer.......T.................text..........................text Like that if you can understand ;p.The box above is google maps. I'm having the most trouble with the google maps and 'T' logo, the google maps will either make my page 30% wider or position way down below the content area and drag other things with it. And the T logo will position differently in other computers if I use absolute positioning, and if I use relative pos, it will drag the center aligned footer text across a little bit. But I think maybe the problems with the divisions, as I've looked at in Visual Studio, and the boxes are taking up half the page and aren't sitting where I want them. Hope you can understand what I mean from the detailed illustration above lol. Also you're commenting out margin-bottom. I don't know if you meant this, just a heads up. Yeah I'm not sure why that's there really lol. Thanks though. Edited June 13, 2012 by Ulterior Link to comment Share on other sites More sharing options...
niche Posted June 13, 2012 Share Posted June 13, 2012 Just mod google's iframe to get control of the map space and post your code! Otherwise, communication won't be strong. Link to comment Share on other sites More sharing options...
Ulterior Posted June 14, 2012 Author Share Posted June 14, 2012 (edited) Just mod google's iframe to get control of the map space and post your code! Otherwise, communication won't be strong.How would I go about modding the iframe? Ok some html code: <!--FOOTER STARTS--> <div id="footer"> <p>Copyright © ***********</p><a href="#">Terms Of Use</a> <a href="https://twitter.com/#!/********" class="twit" target="_blank"> <img src="http://www.niftybuttons.com/classic/twitter.png"></a> </div> <!--FOOTER ENDS--> I've just put both divs of text to float left and the logo, the only division that floats left however is the 1st one the rest sit in the middle of the page why is this? Both divisions are styled as this: .box7{ float: left; /*floats left*/padding-top: 10px;padding-left: 0px; text-align: justify;font-size: 14px;color: #2c2c2c; /* margin-bottom: 15px; /*adds a bottom margin*/} Also here I am trying to get a title and text below it floated left below another division with title and text above but it just won't have it. <div class="box7"><!--BOX STARTS--><h2 class="boxtitle6"><b>E-mail</b></h2><p><a href="mailto:paul@ryanventura.com?subject=feedback">paul@ryanventura.com</a><p/><p><a href="mailto:sales@ryanventura.com?subject=feedback">sales@ryanventura.com</a><p/><p><a href="mailto:tash@ryanventura.com?subject=feedback">accounts@ryanventura.com</a><p/></div><!--BOX ENDS--><a href="http://twitter.com/ryanventuraltd"><img src="http://www.twitterbuttons.com/upload/images/6a2fe834b0twitter-wb-fm.png" class="follow" title="Twitter" width="259" height="88" /></a><iframe width="425" height="350" class="maps" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=uckfield+TN22+1QG&aq=&sll=50.987259,-0.00368&sspn=0.151067,0.41851&ie=UTF8&hq=&hnear=Uckfield+TN22+1QG,+United+Kingdom&t=m&z=14&ll=50.966023,0.08223&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=uckfield+TN22+1QG&aq=&sll=50.987259,-0.00368&sspn=0.151067,0.41851&ie=UTF8&hq=&hnear=Uckfield+TN22+1QG,+United+Kingdom&t=m&z=14&ll=50.966023,0.08223" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div> .box7{ float: left; /*floats left*/padding-top: 10px;padding-left: 0px; text-align: justify;font-size: 14px;color: #2c2c2c; /* margin-bottom: 15px; /*adds a bottom margin*/}.boxtitle6 { color: #2c2c2c; /*text color*/ text-transform: uppercase; /*transforms text to uppercase*/ font-weight: normal; /*sets font weight*/font-size: 16px; text-align: center; Edited June 14, 2012 by Ulterior Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now