I'm building a wordpress theme and I'm stuck on something.
I have a div on the side with these styles:
#sidediv{
width: 20%;
height: 71%;
float: left;
overflow: hidden;
background-color: #000;
}
and:
the "content" div with these styles after the sidediv
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
}
The problem is that the #main div is partly underneath the #sidediv.
The content is next to it as it should be but the padding is not applying and if the background-color is removed from the #sidediv the background-color of the #main is showing underneath
This is the website i'm working on http://vba.durfoptevallen.nl/
try this:
#main{
background-color: #a70202;
color: #FFF;
min-height: 71%;
padding: 10px;
float:left;
width: 80%;
}
Added float:left and width: 80%;
On that url, you have another problem:
http://vba.durfoptevallen.nl/wp-content/themes/Vastgoedbeleggingen_Theme/js/small-menu.js?ver=20120206 is not loading (404)
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
Here's my page:
https://i.stack.imgur.com/mKp9H.png
I don't know why it's not aligned... I'm newbie in html and CSS.
Here's my code:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo {
background-color: black;
color: white;
text-align: center;
padding: 15px;
}
#nav {
min-height: 640px;
width: 130px;
background-color: lightgray;
float: left;
}
#content {
min-width: 687px;
padding: 20px;
float: left;
}
#ad {
float: left;
width: 122px;
min-height: 620px;
background-color: yellow;
padding: 10px;
}
#footer {
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
LINK TO PASTEBIN.
I need this for my school and I can't solve this problem.
I've been trying for past few hours to get it to work, I tried to google for fix but they don't seem to work or I'm just too dumb.
PS: Sorry for my english and my "skills" in html.
You probably want to put all content inside the container. "nav", "content" and so on are currently not inside the container as the container is closed before "nav" starts. To put everything inside the container you have to remove the </DIV>-tag before <DIV ID="nav">. This also fixes the problem with the stray </DIV>-tag at the end. Hope this helps.
I'm currently making a simple landing page with Bootstrap. My Jumbotron is set to 100VH.
When testing yesterday I noticed the content inside of my Jumbotron breaks when the browser is zoomed in beyond 100%.
Example of what is happening here(Zoom IN): https://jsfiddle.net/y8dnbz3t/
The Code:
CSS
*{margin: 0;}
.jumbotron {position: relative;
width: 100%;
height: 100vh;
background-color: lightblue;
text-align: center;}
/* Div that breaks */
.box {
position: relative;
display: block;
height: 250px;
width: 50%;
background-color: black;
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
/* Content after 100VH */
.after {
text-align: center;
padding: 10px;
}
What I tried:
I attempted setting the height of the 'Box' to auto. Didn't help.
I do not anticipate that many people zoom in or out.. but this is part of the development process and a bug I'd like to know how to fix.. and what causes it.
How I somewhat Solved it:
I simply changed the height of the Jumbotron from
'height: 100vh'
to
'min-height: 100vh;'
It does not keep the box element at the middle of the div as it should. But, it does solve the simple breaking issue that was occurring before.
I will try and add some transform:translate properties and see if I can get it to center properly this way.
try changing .box class height to 50%
.box {
position: relative;
display: block;
height: 50%;
width: 50%;
background-color: black;
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
The header in the pic is styled in 3 parts the top part contains a div with the width 100% and background color and inside the dive there is a div styled as a container which holds all elements at the top. This container has a width of 1000px and min-width of 960px and margin: 0 auto;
but when u re-size the browser and scroll with the scroll-er at the bottom the header appears as follows.
What am I doing wrong here for it to render this way?
CSS
#header {
height: 120px;
width: 100%;
margin-bottom: 15px;
}
#header .nav-content-holder {
width: 1000px;
min-width: 960px;
margin: 0 auto;
}
#header .header-menu-top {
height: 20px;
background-color: #d8d4cf;
color: #Color-Txt-black;
}
#header .header-menu-middle {
height: 70px;
background-color: #Color-FM-brown;
color: #Color-Txt-white;
}
#header .header-menu-bottom {
border-top: 1px solid #d3d3d3;
height: 28px;
background-color: #Color-FM-brown;
margin-bottom: 15px;
color: #Color-Txt-white;
}
HTML
Without code it is impossible to know what is going on but you need to try min-width: 1040px; on body.
I have been stuck with this div in the header wrapping to the next line when the window is resized. You can view it at http://www.commexfx.com . The right div in the header which includes the search box etc is wrapped to the next line when resizing the window. I tried everything: changing position, display, white-space, etc, but nothing. the structure is like this:
<div id="header">
<div id="logo"> </div>
<div class="top-widget"></div>
</div>
And the CSS code for the time being is:
#header {
margin: 0 auto;
/* max-width: 960px; */
width: 960px !important;
height: 100px !important;
border: 1px solid blue;
background-color: #ffffff;
white-space: nowrap !important;
}
#logo {
float: left;
z-index: 9999999;
margin-bottom: 20px;
width: 360px;
display: inline;
border:1px solid green;
padding: 0 !important;
margin: 0 !important;
}
.top-widget {
background: none;
border: none;
/*clear: right;*/
float: right;
height: 95px;
text-align: right;
display: inline;
width: 590px !important;
border: 1px solid yellow;
padding: 0 !important;
margin: 0 !important;
}
Would appreciate any help. Also searched the forums here and tried every possible solution I could find but nothing.
Thanks
Add min-width:960px to your css #header declaration.
Replace your css with these new ones. Floating two elements, one right and one left will make them wrap so I would use inline-block.
You don't need position:relative unless you are positioning elements within that div as absolute so you can remove those as well. Same with z-index.
Also, you don't need !important unless you have other styles overriding this. I try and use it sparingly.
#header {
margin:0 auto;
width:960px;
}
#logo {
margin-bottom: 20px;
width: 360px;
display: inline-block;
}
#logo img {
vertical-align: inherit;
}
.top-widget {
text-align: right;
width: 570px;
display: inline-block;
}