Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    I want to position something, but don't know how

    I would very much like this:



    To look like this:



    And here is my code (which is so far written in the needlessly obfuscate and infuriatingly unintuitive language, known as CSS... but hey, what choice do I have?) Salient code area is highlighted:

    Code:
    HTML
    			<div id="gallery">
    				<div id="compound">
    					<img class="p1"
    					src="../assets/events/evp001.jpg"
    					alt="#" 
    					/>
    					<img class="p2"
    					src="../assets/events/evp002.jpg"
    					alt="#" 
    					/>
    					<img class="p3"
    					src="../assets/events/evp003.jpg"
    					alt="#" 
    					/>
    					<p>
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    					</p>
    					<img class="p4"
    					src="../assets/events/evp004.jpg"
    					alt="#" 
    					/>
    					<img class="p5"
    					src="../assets/events/evp005.jpg"
    					alt="#" 
    					/>
    					<img class="p6"
    					src="../assets/events/evp006.jpg"
    					alt="#" 
    					/>
    					<p>
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    						Ipsum lorem dopsa et manin
    						blagaurim sent wonkerblurb.
    					</p>
    				</div>
    				<p class="p7">
    					<img
    					src="../assets/events/evp007.jpg"
    					alt="#" 
    					/>
    					Ipsum lorem dopsa et manin
    					blagaurim sent wonkerblurb.
    				</p>
    				<p class="p8">
    					<img
    					src="../assets/events/evp008.jpg"
    					alt="#" 
    					/>
    					Ipsum lorem dopsa et manin
    					blagaurim sent wonkerblurb.
    				</p>
    				<p class="p9">
    					<img
    					src="../assets/events/evp009.jpg"
    					alt="#" 
    					/>
    					Ipsum lorem dopsa et manin
    					blagaurim sent wonkerblurb.
    				</p>
    				<h1>
    					Coming up...
    				</h1>
    				<p class="j">
    					Our first Whitby Gothic weekend 
    					lab will be held at The Resolution 
    					Hotel, Skinner St, Whitby.  Our lab 
    					will be loosley based around a 
    					celebration of the  works  of the 
    					great Hollywood monster makers, Dick 
    					Smith, Rob Bottin, Stan Winston, Steve 
    					Johnson, Tom Savini and many others.
    					The precise subject or ‘monster pick’ 
    					for the WGW lab is yet to be decided 
    					and we welcome any suggestions from 
    					you on this.  Please read our news section, 
    					for more details.
    				</p>
    				<img class="p10"
    				src="../assets/events/rez001.jpg"
    				alt="#" 
    				/>
    	    		        <p class="j">
    					During this lab, we will be collecting 
    					for the Sophie Lancaster memorial bench 
    					appeal.  There will be no admission fee, 
    					but we hope you will be able to make a 
    					donation, towards this cause.  More 
    					details are to be found in our news 
    					section.
    				</p>
    			</div>
    
    CSS
    /*******************
    Gallery Settings
    ********************/
    #gallery{padding:2em 0 100px 0}
    #gallery p{font-size:0.8em;float:left;margin:1em 0 1em 0}
    #gallery img{display:block;margin:0 0 1em 0}
    #gallery h1{text-align:center;color:#ccc;margin:2em 0 0 0}
    #compound  p{text-align:justify}
    #compound img{float:left}
    /*#fmfxl{width:200px;height:203px;background:url(../assets/events/wgw_bh_logo.jpg) no-repeat scroll top} */
    
    #test .p1{margin:0 0 0 0}
    #test .p2{margin:0 0 0 3px}
    #test .p3{margin:0 0 0 3px;clear:right}
    
    #test .p4{margin:0 0 0 0}
    #test .p5{margin:0 0 0 42px}
    #test .p6{margin:0 0 0 42px;clear:right}
    
    #test .p7{width:140px;margin:40px 0 0 0}
    #test .p8{width:174px;margin:0 0 0 32px}
    #test .p9{width:134px;margin:24px 0 0 31px;clear:right}
    
    #test .p10{float:left;}
    #test .p11{font-size:1em;text-align:center}
    As you'll deduce, #compound is my ID for a "compound row" of images, which break the flow, block, inline, floating, clearing, oh god, whatever...(I feel sick). You know what I mean.

    So does anyone have any ideas how I can possibly position that image and that text into the page, please?

    I have tried many, many things, but again and again, the result is, as usual, with my understanding of CCS, a complete mess. Now I'm fresh out of inspiration. Can anyone please help...?

    Many thanks,
    Last edited by Doctor_Varney; 11-15-2008 at 10:29 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Is that a single image?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by abduraooft View Post
    Is that a single image?
    Ah, no... The image, (which includes the words "at the") and the white H1, are seperate elements. I originally had this styled as a bg img in a div, with the H1 over the top.

    Trouble is now, I'm having a LOT of trouble, positioning this div, within the latest version of this page.

    Last edited by Doctor_Varney; 11-15-2008 at 11:23 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Trouble is now, I'm having a LOT of trouble, positioning this div, within the latest version of this page.
    But our trouble is in visualising your page along with its markup and screen shots.
    A live link always enable us to edit the HTML and CSS by tools like firebug or CSSvista and test it in live. So I'd recommend you to upload your page or at least a sample page(with some sample image, having the same dimensions as that of your original) to your host or a free host like freehostia.

    Come on.. let's save our valuable time by explaining the layout in words
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by abduraooft View Post
    Come on.. let's save our valuable time by explaining the layout in words
    Good advice, Abdura. I'll make a plan of it.

    A live link always enable us to edit the HTML and CSS by tools like firebug or CSSvista and test it in live.
    I didn't know you could do that... Excellent!

    Well, I have one more thing to try...

    Last edited by Doctor_Varney; 11-15-2008 at 06:06 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I have managed to fix it. By closing the last div and opening up another, with a fresh set of rules, I could reset the display mode and re-float images. The "Free Monster" graphic was literally behind the picture of the hotel, all the time!

    Thanks for looking,
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Very slippery, these Free Monsters.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    It's funny... Sometimes, don't you find, just by posting a question, then reading it through afterwards, makes it easier to root out the troubles? Must be the thought process involved in compiling the question, but I saw the answer, by the time I'd read it back to myself, a few times.

    Quote Originally Posted by effpeetee View Post
    Very slippery, these Free Monsters.

    Frank
    Indeed. Even worse, if a hairy one gets out...
    Last edited by Doctor_Varney; 11-17-2008 at 04:33 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •