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
Related
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>
I am building a website for my upcoming wedding and I want a sticky header, but for some reason, it "disappears" by moving up after you go a certain way down the page. My test url is this: https://betterradiotech.com. Here is the nav markup:
<!-- Start Nav -->
<header>
<nav>
<ul class="nav-list">
<li>Home</li>
<li>Music</li>
<li>Gallery</li>
<li>Feed</li>
</ul>
</nav>
</header> <!--/ End Nav -->
Here is the nav SCSS:
header {
padding: 1em;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
background-color: $burgandy;
}
.nav-list {
display: flex;
flex-flow: row nowrap;
li {
list-style-type: none;
margin-left: 10px;
}
a {
color: $pink;
font-weight: 600;
}
}
.active-nav {color: $navy !important;}
There is no JavaScript in making the nav, except for making the active nav work...for completeness sake, I will include that as well:
switch(location.pathname) {
case "/":
document.querySelector("a[title*='Home']").classList.add("active-nav");
break;
case "/admin/":
document.querySelector("a[title*='Admin']").classList.add("active-nav");
break;
case "/feed/":
document.querySelector("a[title*='Feed']").classList.add("active-nav");
break;
case "/gallery/":
document.querySelector("a[title*='Gallery']").classList.add("active-nav");
break;
case "/music/":
document.querySelector("a[title*='Music']").classList.add("active-nav");
break;
}
Why is my nav bar disappearing after a certain distance down the page? It seems to happen right before the end of the full background picture in the first section.
The reason for this is probably that your containing element is not as tall as you think, and you may have to set that element's height to fit-content explicitly, because sticky elements cannot leave their parent!
In most situations, the simplest solution will be to add this rule to your CSS:
body {
height: fit-content;
}
But generally, which solution you need and which element you have to apply it to depends on your document structure. Let's say it looks something like this:
<body>
<header>
<nav>
<!-- Your navigation -->
</nav>
</header>
<main>
<!-- The main content of the site -->
</main>
</body>
And you probably use some CSS reset that contains a rule like this one:
html, body {
height: 100%;
}
This allows using percentage heights on your page, but it will break sticky headers without additional work.
When you look at the size of the body with the dev tools, everything may look alright:
But once you scroll down, you see a problem:
The body is just as tall as your viewport. All other content you see is just overflowing out of it. But a sticky header can't do that, it will stay within the body and disappear with it. We now have three potential solutions:
If you don't need percentage-based heights on your page, you can use this CSS rule:
body {
height: fit-content;
}
If there are some percentage-base heights, try replacing them with vh instead, and see if that works for you. Then you can apply the fix from above.
If you do need percentage-based heights, then you might want to make the body stay in place but scroll the overflowing content through it:
html {
overflow: hidden;
}
body {
overflow: scroll;
}
I think you'll get the desired behavior by switching from sticky to fixed. Sticky is sort of a hybrid of fixed and relative positioning, and changes its behavior relative to context, and is commonly used to allow items to respond to its neighbors via scroll position.
Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
So you want:
header {
position: fixed;
}
PS: The reason its disappearing for you is that your body has a computed height, but the contents of the body overflow beyond that height. The sticky element scrolls away once you scroll past the computed height of the body, which is the header's parent.
The previous soultions did not work for my situation.
position: fixed made the other elements hide beneath it. And adding margin top or top to them messed the header a little bit. After almost two days of banging my head against the wall, I ended up adding this css to my modal in my styles.scss:
.modal-class{
display: initial;
}
This worked for me, hopefully helps save someone else's time.
When the viewport size is 784 x 741 there is a left and right margin applied to the box that I want to get rid of. I know how to get rid of the "white space" at the top, but it's the "white space on the sides that I can't get rid of. Does anyone know how to eliminate the white space so the header stretches the full width of the browser viewport? My codepen is below.
codepen
<div class="container">
<div class="grid_12">
<header>
<nav>
<ul>
<li>Home</li>
<li>About<li>
<li>Contact</li>
</ul>
</nav>
<h1>ALIEN</h1>
</header>
</div>
</div>
If you searching for the quickest way to make the header full width of the screen, you have to add another one class to two divs (let's call it 'full-width' for example). The result should be something like this:
Html
<div class="container full-width">
<div class="grid_12 full-width">
<!-- another code -->
</div>
</div>
Css
.full-width {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
This class will reset all paddings/margins and set width to 100% for every (or almost every) element with this class. After this, little margins (8px) will remain, this is margins of body element. If you want to get rid of them too, just include in your css this code:
body {
margin-left: 0;
margin-right: 0;
}
This is the quick way that mustn't break another css a lot. But if you're wondering what properties should be changed (you can change them manually instead of adding our 'full-width' class), have a look:
You can change the lines 105 and 106, 221 and 222 to
margin-left: 0;
margin-right: 0;
You also need to reset paddings on lines 327 and 328
padding-left: 0;
padding-right: 0;
Don't forget to set width: 100% !important; to container and grid_12 divs! In order not to break the remaining css, add new class(es) or ides.
It looks like you can change margins for any media query to any value you want (or delete them by adding margin: 0; property). If you want to clear margins for all elements, just apply * {margin: 0;} somewhere at the top of your css (just in case, let me remind that the * selects all elements).
You also can change margin-top, margin-right, margin-bottom and margin-left properties separately.
Choose any media query you want and override margin property for it.
If this does not solve the problem as you want, you have to solve this by changing
position and width of elements.
I want to put a bunch of clickable links in a sidebar with a hover effect that covers the entire width of the sidebar. Some of these links also include an image that needs to be aligned so that it's vertically centered in relation to the text. Here's what I currently have:
As you can see, the hover effect and the <a> tag don't cover the entire width of the sidebar yet. That's bad because of big link targets are easier to click. I've tried tinkering with horizontally stretched CSS-based table cells, but then the text parts didn't stay aligned properly.
What's the proper way to do it? ~I could post my current HTML if it's helpful, but I was planning to rewrite my markup based on this answer's solution anyway.~
Edit: here's the relevant HTML snippet.
<nav id="sidebar">
<ul>
<li>Home</li>
</ul>
<header>Recently Added</header>
<ul id="recents">
<li><img src="http://media.radiantstreamer.net/stations/q2music.png" alt="Artwork"> <span>Q2 Music</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtmoclassic.png" alt="Artwork"> <span>Mostly Classical</span></li>
<li><img src="http://media.radiantstreamer.net/stations/rtpitrios.png" alt="Artwork"> <span>Piano Trios</span></li>
</ul>
</nav>
Putting display: block; on the relevant links should make them full width. Or if it doesn't, display: block; width: 100%;. width: 100% on its own doesn't seem to be much use on inline elements.
…And some positioning to fix the alignment, e.g.
ul li a {
display:block;
text-decoration:none;
position:relative;
}
ul li a span {
position:absolute;
top:50%;
}
Have you tried position: absolute; width: 100% (or something like that) on your links? That should make it the parent's full width.
How I solved it
First I made my <a> tags render as a one-row CSS table by setting them to display: table and its children to display: table-cell. You'll need to add width: 100% to the table tag to make it stretch horizontally. But then the text didn't align properly:
Adding a width: 100% to <span> containing the text does the trick:
Uh oh... the 5 pixels of left padding on my links are causing spillover on the right. The fix was fairly easy: wrap the link tags in another <span> tag and adjust the CSS display rules so that the new <span> renders as a table. Bam!
Summary
I've prepared a minimally working HTML5-compliant example for the benefit of future readers.
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.