I'm having issues in making a piece of text on my website, which will be part of the navigation system, become responsive. Currently, the text is just sitting there and will not move when I readjust my browser.
Here is my HTML:
<div id="apDiv1">
<div class="wrapper1">
<h2>Home</h2>
</div></div>
Here is my CSS:
.wrapper1{
width:100%;
max-width:960px;
margin:0 auto;
}
You expect your text to move when you change the size of your browser window.
However, if the text is left adjusted (as you your case), it will always be on the left, regardless of the window size. So you should not expect it to "move".
Are you trying to center the div on-screen? I'm not sure what you mean by move the text.
If you want to center the div ".wrapper1", add position: relative to it.
If you want to center the text, make it text-align: center;
Did you include the css file correctly in your html?
The following works as expected. You can base your debugging on that:
<html>
<head>
<style type="text/css"> .wrapper1 {color:red; text-align:center; width:100%;} </style>
</head>
<body>
<div id="haha">
<div class="wrapper1">
<h2>Hello World.</h2>
</div>
</div>
</body>
</html>
Related
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
I have been messing around with trying to get a sidebar to stay fixed to a center div, and I have it mostly working in Firefox and IE, but for some reason it is not working in Chrome. My issue is that when I resize the window the left sidebar no longer extends to the bottom of the page in chrome. All the code is included below, so you can see what I am seeing in your own browsers.
My question is: why is Chrome acting this way and is there a way for me to fix this? My Chrome version is 28.0.1500.95.
Thanks.
HTML:
<html>
<header>
<link rel="stylesheet" href="test.css"/>
</header>
<body style="margin:0">
<div>
<div class="width main table">
<div class="relative-float-left" style=" width:0px; height: inherit; ">
<div class="relative-float-left sidebar table">
--Some lorem ipsum here--
<br style="clear: both; " />
</div>
</div>
<div class="relative-float-left content">
--Some lorem ipsum here--
</div>
<br style="clear: both; " />
</div>
</div>
</body>
CSS:
.relative-float-left {position:relative; float:left;}
.width {width:33%;}
.table {display:table;height:100%;}
.sidebar {width:30px;right:45px;background-color:yellow;}
.content {margin-left: 10px; width: 95%; background-color: orange;}
.main {background-color:blue; width:50%; margin:auto;}
Edit: I want the center div to dynamically size with the sidebar to be fixed. Content inside the sidebar can't be clipped and I want any content that can't fit onto the page to be pushed down and make the page bigger (thus I do not want to use inner scrolling for the content (orange) div. Sorry for the messy code, it was just easier to test out a proof of concept.
I have also rewritten the code to give it a stylesheet for easier readability. I would really like this answered as I have no idea why this is happening. It may have something to do with this answer.
You have <header> in your source instead of <head>. This causes the document to be invalid, not because you can't have a header in that position - the browser automatically inserts a <body> start tag there and then puts the header inside it - but because there is a <link> in it which should be in the head, not in the body. And then there is a <body> start tag while the body is already open, which is disallowed too.
Edit: I see you edited your comment now, so does that mean you no longer believe this is the cause of the problems?
I have been working on a website for my self recently and ran into an odd problem. Whenever I would move a to the left the page would expand by the amount of pixels I had moved it left from the center. It doesn't hinder functionality but it's really annoying to have this 300-400 pixel space that you can scroll off to the side with. Maybe I'm doing something wrong but any help would be appreciated.
This is an example of what I am doing:
<html>
<body style="background-image: url('Background-Large.jpg'); text-align: center">
<div style="position:relative;top: -605px; left: 295px;"></div>
</body>
</html>
I'm not quite sure what you're trying to achieve here but if you put an 'overflow:hidden' on the body, it should allow you to position your div off the page without adding a scroll bar.
It's because your DIV is set:
left: 295px;
If you want a DIV to be in the center the first thing you should do is make a "main container":
<style type="text/css">
.wrapper {width:500px;margin:0 auto -1.5em;}
</style>
<div class="wrapper">
</div>
Then from there you can add elements inside that container thats now centered:
<div class="wrapper">
<div style="float:left;margin-left:-295px;">
</div>
</div>
I would like to have a specific layout but don't know how to fix it up in CSS.
here is my code:
<html>
<body>
<div id="outer" style="text-align:center;">
<div id="mainContent" style="background-color:red; width:700px; margin-left:130px;
display:inline-block;">
<p>A Lot of Text Here. Yes, A Lot of Text. Gotta Love it. More Text.</p>
</div>
<div id="rightNav" style="background-color:blue; width:130px; display:inline-block;">
<p>Some Text</p>
</div>
</div>
</body>
</html>
Now the problem is:
I want to have the content div be always centre aligned no matter what the window size is and regardless of whether the sidebar is there. The content is around 700px and the sidebar around 130px. The sidebar needs to sit to the right of the content.
Now I have managed to accomplish the above, but the tricky problem is how can I fix this so that when the window size is say 830px (700+130) that all content is visible and half of the sidebar is not cut off due to the content div being centred.
I hope I have explained this clearly enough.
Update: I have update the code to include CSS. As you can see the red section is centered, the blue to the right. This is what I want, expept when the window gets too small, I always have a minimum of a 130px gap on the left which is not what I want. (but had to put it in there to get the layout aligning right)
Something like this may help
<html>
<body style="overflow:hidden;">
<div id="mainContent" style="overflow:auto; position:absolute; top:0px; left:0px; right:130px; bottom:0px;"></div>
<div id="rightNav" style="overflow:auto; position:absolute; top:0px; width:130px; right:0px;"></div>
</body>
</html>
Edited:
#Nathan Arthur was so kind to add a nice fiddle to demonstrate the solution above.
...Demonstration of this in action: jsfiddle.net/2QQtU Try moving the middle divider to see the magic.
CSS
#outer {
position:relative;
width:830px;
margin:0 auto;
}
#content, sidebar {
float:left;
}
#content {
width:700px;
background-color:#afa;
}
#sidebar {
width:130px;
background-color:#faa;
}
That's all :)
*EDIT* just added background-colors to see the example better.
It appears what I want is not possible in a single solution. I will need to use conditional CSS to accomplish this.