My first attempt using bootstrap on a webapp - this is how it renders on my iPhone.
Why is everything showing up under 100% width?
Example: The top of the page is called dark container, a wrapper with an image embedded, this is the css
#darkcontainer {
height:200px;
width:100%;
border: none;
background-color:whitesmoke;
text-align:center;
}
My guess is that the image beneath(part of a slider) is pushing everything under 100% because it is much larger? That slider has the following css
#slides {
height:500px;
width:1065px;
margin: 0 auto;
ul.pagination {
width:100%;
text-align: center;
li {
display:inline-block;
}
}
}
.slides_container {
width:1065px;
height:500px;
}
.slides_container div {
width:1065px;
height:500px;
display:block;
}
The mailing list looks like it would be different, because there is more of the background color there before it turns white, but that's just... a 100% width wrapper centering the child
#autoheightwrap {
height:auto;
width:100%;
background-color:whitesmoke;
}
#mailform {
height:100%;
width:600px;
margin: 0 auto;
background-color: whitesmoke;
padding: 6px 12px;
...
Feel free to look at the website in your browser here.
Any ideas why it is being rendered this way?
#slides is set at a width of 1065px. This is the culprit that is breaking your site. You'll have to restyle it with a media query targeting mobile.
For a more responsive friendly slideshow, might I suggest cycle2?
Related
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
I made a header(menu) for my website from the left side to right side (like in this image)
and it works. But when I resize web browser right side of header gets cut down (image)
my code:
#header {
width:auto;
height:50px;
background-color:#ffffff;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
#headercontainer {
width:980px;
margin:0px auto;
}
Use percentage values for better flow. If you want more customization on how you want your website to behave in different screens use media queries. Here is a good tutorial
#headercontainer {
width:75%;
margin:0px auto;
}
Don't use px in width, make your width size in percent like
#headercontainer
{
width: 80%;
margin: 0px auto;
}
#header {
width:100%;
height:50px;
background-color:#ffffff;
margin:0 auto 10px;
border-bottom:1px solid #ccc;
}
if you use auto, the header will adjust to the required width, so you need 100% . Of course, just trying to figure what your html looks like since you didn't include it, but in 9 out of 10 situations, this is what you need
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I'm really struggling with the homepage of my website.
The images saying Animation and Interactive, Web Design, Print Design and Illustration look fine on my computer, but when I look at my site on my iPad they aren't scaling properly.
Here is the CSS:
#content {
position: relative;
color: #333;
width:100%;
min-width: 900px;
border:none;
background: none;
overflow:auto;
padding-right:32px;
padding-left:32px;
padding-bottom: 86px;
}
#slideshow {
position:relative;
height:462px;
z-index:-1;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#rightholder {
float: right;
clear: left;
max-width: 639px;
width: 60%;
padding-top: 90px;
z-index:11;
}
.right {
float:right;
margin-bottom:20px;
max-width: 50%;
z-index:13;
}
.left{
float:left;
margin-bottom:20px;
max-width: 50%;
z-index:12;
}
I'm not sure exactly what you're trying to achieve but I believe your problem mainly comes from some of your min-width and max-width properties that constraint the page when resizing.
If you're using flexible units, you should try to let the layout be as fluid as possible. I'm guessing you're using these properties to prevent odd behaviors, for that you should rather use media queries to adapt your design to various resolutions.
You should also make sure you don't set fixed sizes to your images (either in your CSS or HTML documents). Instead, use img { max-width: 100%; }.
Hope it helps.