I made some changes to a website for someone and it works and looks perfectly when I open them in chrome, but as soon as I upload them on to the iPage server and look at them on the actual site everything is broken.
The index page is the only page that looks how it's suppose too. I've exhausted most of my resources and the person is furious. Anyone have any ideas as to what could be causing this?
If you haven't already, wrap all the buttons inside a container. Make the buttons width 25%, float them left and then position the container, as you haven't provided any code i'll provide an example for you. This should solve the problem.
Inside the container where the buttons are, create a new div and call it button container and wrap it around buttons.
<div id ="button_container">
//button tags go here
</div>
For CSS assign the width and height to the button container and for the buttons including the css you have now.
#button_container {width:25%; height:30px;} //example dimensions
#button1, #button2, #button3, #button4 {width:25%; height:100%; float:left;}
make sure the container has a margin so that is above the other content. you can also make the container 100% width to match the width of it's parent.
Related
the chat div is breaking the bottom of the border line when im not hovering over it. cant seem to find a solution so any help or advice? thank you.
CODE: http:/jsfiddle.net/7wf912Lt/
As extended comments should be avoided on Stackoverflow - in case the Fidddle already looks like the required layout, just the necessary steps in case it's not so clear how it's done:
The top link is just a <div> on top of the embedded swf. The swf is wrapped in a <div> with float:left; the left and right link are also wrapped in a <div> with float: left. Therefore all divs are positioned in one row. To clear the float, I've just added a <div> with clear:left;. In addition, the width and height of the container have to be increased a bit so everything fits. Last step will be to reduce the margin: left of the container, so the content will be displayed centered. There are different solutions to display content centered, but I guess you'll have no problem to fix the rest.
For the Fiddle I just increased the height of .chat to 550px, the extra 50px are needed to have the additional height for the top link. Otherwise the swf would be displayed breaking the bottom border / partly outside of the box.
Update: Question was changed from displaying links around an embedded swf (which is solved) into the follow-up issue that the swf breaks the bottom border when it's not hovered. Problem is that link provided in question doesn't display the swf chat, therefore the mentioned problem is not solvable. Already added the CodePen-CSS into an updated Fiddle and only changed the height of .chat from 500px into 550px to provide enough space for the added links, and swf doesn't display like described. Further information to be added to the question is from which browser the screenshot was taken as I've only tested with Firefox and there it displays as intended.
Update2: As updated Fiddle by OP displays the described problem, should be fixable by adjusting css. The problem is located in the left link with the position set to 200px; if set to 0 before hover, the chat is displayed in the border when the height is set to 550px instead of 500px.
Update 3: Adjusted Fiddle like follows: changed the left link to position: absolute;, so it's taken out of the flow and won't interfere with the chat window. Otherwise the chat would be pushed down on hover when the left link is displayed on hovering chat as both share the same position for some seconds. Also reduced the margin-left of the chat so it's displayed centered. Fiddle: Fiddle
I guess you won't have any problems to e.g. adjust the padding or margins if you want more or less distance between the links and the border.
In case this works as intended would be kind to follow this step - Stackoverflow , otherwise just add possible issues to your question.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I am doing a popup on a clients site for their new restaurant location. The base site is kind of a cookie cutter type site, and very messy (I'm not sure if I should attribute this to the problem). Everything was going fine until I added some divs that were positioned relatively and had width and height to the absolute div "pop-up". Now, the popup pushes the base site down, and the popup goes behind (it has a z-index of 10?). Here is the brand new css:
http://addproxy.net/sites/testing_space/css/style.css
and the site is down a level:
http://addproxy.net/sites/testing_space/
And a mockup of the desired effect (disregard the backslashes, hit max of href):
//http://addproxy.net/sites/testing_space/popup-mockup.jpg
The divs that seemed to trigger the problem were the .coupon class
Any help will be greatly appreciated!
You placed the original content inside of your new div's.
To make it look like your image that would be the id="coupons" div. Just so we're clear it's the one that starts like this:
<div id="coupons">
<div class="coupon" style="background:url(images/bg1.png);">
You need to move that div (and all it's contents) to just after the end tag of the id="popup" div.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }