Ok, I looked everywhere and couldn't find a working solution for the following issue:
I create a simple sidebar in html using css, which is larger than the browser-window, so scrollbar is displayed:
#sidebar
{
display: table;
width: 450px;
padding: 10px;
vertical-align: none;
margin: 15px 0 0 0;
text-decoration: none;
background-color: #757575;
}
<body>
<div id="sidebar">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</div>
If scrollbar does not appear, just add a couple more lines.
Now my issue is, when the scrollbar appears it always appears at the right side of the browser instead of directly at the sidebar.
I found a lot of possible solutions, which I tried, like:
- setting overflow-y to every value possible
- changing the "display" parameter to every value possible (including flex, inherit, inline-table)
- setting a max-width
it appears like the system always assumes the sidebar to strech over the whole screen, because when using the display:inherit value it does exactly that
Also I couldn't figure out how to make the sidebar resizable, so the user can change the width like with a normal window, I assume these issues are connected.
Do you have ideas I haven't tried yet? I know one solution would be using frames, but also heard those are rarely used anymore and when trying that there were other issues occuring
First you can't use li tag without wrapping it into ul tag.
For example:
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
Reference :https://www.w3schools.com/tags/tag_ul.asp
I guess you want to achieve something like this. Refer below code
<div class="container">
<div class="main">
Give this area width as 70% using css
</div>
<div class="sidebar">
Give this area width as 30% using css
</div>
</div>
Related
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
I have a header image for a layout that I'm working on that is 1200px wide. The layout is fixed.
I'd like the container that wraps this image (and any container that wraps it up in the DOM hierarchy) to adapt to the 1200px. First thing I thought on doing was to just:
.container {
width:1200px;
}
It works, but then what's the point of using bootstrap? And also, I'd probably be messing with the grid by forcing a width this way, right?
So, I tried to setup the grid to add up to 1200px, but still keep 12 columns, like this (I'm using sass):
$grid-column-width: 70px;
$grid-gutter-width: 32px;
However, I could only approximate (or go way above) 1200px, while keeping 12 columns. In this case, I got 1192px, which works, but is not optimal.
Here's the markup I'm using:
<div class="container">
<div class="row-fluid">
<div class="header-photo text-center span12"></div>
<div class="row-fluid">
...
</div>
...
</div>
</div>
And here's the SCSS that setups the header div:
div.header-photo {
background-image: url(/images/header-photo.png);
width: 1200px;
height: 368px;
h2,h3 {
text-indent: -99999px;
}
}
So, if I use span12, the other divs adapt to the size of the header-photo div, but only up to 1192px.
What would be the best approach to get the container to be of exactly 1200px?
force it with a CSS rule (like I tried doing) ?
A combo of the grid conf that I'm clueless about?
Tell the designer to make the header photo smaller/bigger so it adapts to another value?
... ?
Any hints highly appreciated!
Thanks in advance!
you should fix the container value by opening the bootsrap gem
Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.
I'm pretty new to CSS and need some help.
I'm currently making a site with one header in the top 100% width with it's content following the 960grid system.
Here's how I've made it so far, HTML and CSS:
<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>
and the css:
#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }
I've used a clear-fix on the header-inner, and everything was working just fine. By inserting the logo as an IMG, it'd make sure that there was 25px space between the top and bottom of the logo, that way "defining" the height of the header.
Even after inserting the navigation as UL/LI elements, it was still working, however later when I added a search input everything messed up. The form tag seemed to give it a invisible border around the input, making it use more height than "needed".
The search input was also larger, so it obviously formed a new height.
I just wanted to know if there's a smart and effective way to make the header instead? Without having to remove the padding from the header-inner and having to define a padding-top and bottom on every single element in the header-inner parent
you can do this by list
<ul>
<li>logo</li>
<li>nav</li>
<li>search</li>
</ul>
you can set the width of li
I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq