I have created a block for my first client's website, im newish to Drupal and web development. On their contact page, I would like to position the block with the contact details to the right of the contact form which I have floated left.
I've tried floating the block right and position with absolute positioning, however when I resize the window it doesn't look right, all the text sqaushes up.
What I need is to move the block down, which I know I will have to put some css into the responsive css files to make the block move under the form when the window is resized but how should I position this text next to the form?
Thank you
You can float that block to the right and give both blocks a specific width
Which theme are you using? Isn't there a sidebar block you can position the contact details in? You shouldn't need to do any floating to achieve this, but rather the positioning of the blocks should be happening at the theme layout and template level.
Related
I have a wordpress plugin that puts social icons at the top of my website. The problem is though the div is outside the main body div (or wrap div). Therefore, when I change the width of my site the social icons move relative to the browser window and not no the actual content of my website. Normally it would be as simple as just moving that div outside the wrap div to inside it, but it is a plugin and the structure of the plugin is nasty in that the div structure is in a minified javascript file and not in a nice HTML/PHP format.
So if you go to my site: http://warringah-plastics.com.au/ you can see the social icons in the div "dcsmt" in the top right hand corner and I want to position it to the left of the website search box where those existing social icons are. How would I do this? So I really want to put the "dcsmt" div inside the existing "top-cont" div. Thanks!
Create an empty div and give it a name "social_icons_wrapper" in your header near the search box where you want the social media icons.
Then call the following javascript from your footer:
var div_to_move = document.getElementById('dcsmt');
document.getElementById('social_icons_wrapper').appendChild(div_to_move);
I'm going to create an special floating menu like this site:
http://www.just-eat.co.uk/restaurants-toscana/menu
as you can see, Categories and Your Order menus float in screen so that their position is almost always the same, and they always stick to top of screen (of course after you scroll the page down), how can I create this effect in ASP.NET? I've set my menu style position property as fixed, but in this way, my menu always has the same position, I want my menus to stick to top of screen
Not sure if ASP.NET has such feature by default. Never seen something like that in it. But it could be done easily with CSS position:fixed placed on top most div of your menu block or using plugin like this, for instance. Please note that position:fixed may cause problems in old browsers
Hello Ali you must add stylesheet in order to float your menu, but you don't have property in order to float your menu basicaly
You can keep the position of the div to position:fixed.
By doing that its position will be relative to the position to browser window and it will appear to be fixed.
Here is Sample Fiddle
More on CSS Fixed Positioning.
I think the title explains it all but this is what I'm trying to do:
I have a site that is center-aligned and I want to have a fixed (or sliding, however you want to describe it) move down the page as a user scrolls. I am able to get this to work using jQuery when I define the 's position as absolute but obviously that creates it's position relative to the whole browser window. Relative to the content, it should be 980px to the right, but using Absolute it's somewhere in the middle of the page and does not stay in the same place on the page when the window is resized. Using position:relative puts the in the right place but does not allow it to move when the page scrolls, it scrolls with the page.
Does that make sense? I see all sorts of examples using absolute positioning which would work great if my site was aligned to the left but it's not.
Ideas?
You can see my site as a work-in-progress here: http://cdn.twelvestops.com/wordpress_one. Feel free to poke in the code and whatnot. (and for the record, the theme designer isn't helping much.)
Note: I know that my site isn't centered using auto margins but as if it was all text using the .center class in the CSS.
Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.
EDIT*the issue apparently comes down to the fact that, i need to use relative position on the large image, so i can adjust the top value. this causes the thumbs to be put on top of the main image. When i remove the relative positioning of the main image, the flow looks fine, but the top positioning is disregarded- i sort of need both to have the dynamic manipulation of this app im developing*
I wish I could understand why this happens like 90% of the time I go to code div layouts.
You have content in your div with a certain height, and then you have another div directly after it - and somehow it just goes right on top of the first one.
I wish I knew where the problem was, but I can't figure out what CSS is the cause.
Anyways, if you care to take a look, this is the sandbox of the issue I'm having:
the reference is changing because i keep updating it to check sorry.
http://www.drewswinson.com/DP/
I'm making a dynamic jQuery gallery viewer and the thumbs just don't want to put themselves below the image.
It happens all the time though; is there any reason content inside a div would allow subsequent divs to not be placed below the content its supposed to be filled?
You problem is the position: relative attribute on imageDiv.
It pushes the image down from where it should be. If you remove that, the static flow of the page will be used, which is what you want in this case.