I am trying to make my subnav list display horizontally rather than stacked. I have tried a few different things, but I cant figure it out. I have tried to use Float, but it messes with the width of the divs below it. Not sure why this happens.
Can anyone help me?
http://jsfiddle.net/9bued/1/
Delete the width limitation (width: 10em;) in #navwidth
Delete the width limitation as Habib suggested, then add a clearfix class to the containing ul.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
The styles for the clearfix should always go at the bottom of your style block or style sheet.
just add to your CSS : display: inline-block;
Related
want to show 1 static page contain everything without a scroll
tried to make boddy padding 0 and overflow: hidden but nothing work
also tried the below page-header and background-image code also not work
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
If you set the body to have an overflow-y of hidden in css it will not allow the user to scroll down the page.
body {
overflow-y: hidden;
}
Go for the root html element, you can style it to:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
The browser will interpret this as the html would use 100% of the usable device width space and hide the rest.
You probably don't want to avoid scrolling but instead make the page elements fit on the screen so there is no scrollbar and still everything is visible.
As a start, you could make the .main class (which only contains your footer) absolutely positioned at the bottom and take it from there
.main {
position: absolute;
bottom: 0;
width: 100%;
}
or, what I'd prefer, set the wrapper to be a flexbox:
UPDATED
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
I'am a beginner of this kind of work. So please be patience!
My Header is a bit messy in Firefox, IE and mobile safari. The logo displays huge and over the nav bar. I manage to fix it by adding overflow: hidden;.
Its a wordpress site.
But it still doesnt displays in the right way.
This is what ive done to fix it.
.logo-wrapper {
line-height: 2.5ex;
height: 90px; /* 2.5ex for each visible line */
overflow: hidden;
/*Option 1: display: inline */
/*Option 2: overflow: auto; */
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
What im I doing wrong?
Check out the site: http://bit.ly/1akopZL
Best regards.
Try simply adding the following to your CSS:
.logo img {
max-height: 100%
}
I gave this a text and it should do the trick.
Edit: taken responsiveness into consideration.
Please take a look at: http://jsfiddle.net/yCrA8/
The blue sidebar should float next to red middle box but instead it's clearing it and sitting below...
How do I fix this? I can't set a width for the .Middle div because it has content that needs to flow outside of the browser view and be scrollable.
Cheers
See: http://jsfiddle.net/thirtydot/yCrA8/4/
One way is to use display: inline-block and white-space: nowrap.
Remove float: left from .Sidebar and .Middle, then add this:
.MainContent {
white-space: nowrap
}
.Sidebar, .Middle {
white-space: normal;
vertical-align: top;
display: inline-block;
/* if you need ie6/7 support */
*display: inline;
zoom: 1
}
#Camernon; there is a reason why your middle div is not wrap because you did not define width to your middle div for this you can define width your middle & it's parent div
CSS:
.Middle
{
background:red;
width:9125px;
float:left;
}
.MainContent
{
margin: 20px;
width: 9330px;
}
check this fiddle http://jsfiddle.net/sandeep/yCrA8/11/
I'm dynamically filling a div with li elements using php. I was having trouble getting the scrollable area to be limited to content. I was previously using a crap load of extra space in my ul, and I still am but when I set height in the css to 70% it works perfectly.
Is this because a ul is traditionally vertical and I'm forcing it horizontal?
heres a link to the working site http://www.evan-livingston.com/test/gallery.php
My css:
div#lasteventimg {
width: 100%;
heigth: 200px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
div#lasteventimg ul {
list-style: none;
height: 70%;
width: 8000px;
margin: auto;
}
div#lasteventimg ul li {
float:left;
display: inline-block;
}
div#lasteventimg img {
width: 200x;
float: left;
}
Your div#lasteventimg has its height property spelled wrong.
ul is a block level element and renders as such. A div is also a block level element.
Because you have floated the li's they sit next to each other until the container is full horizontally. Then they will wrap to the next line. To prevent the wrapping you can use overflow scroll, but ul does not support this property. So instead you use overflow on a containing div.
Hard to tell why your old did not work and your new way does work without example code.
You can save yourself sometime by doing this in JQuery. Take a look at this article this should help and make it look 10x better.
maybe, replace the <li> elements with <div> and remove the <ul>
div#lasteventimg {
overflow-x: scroll;
overflow-y: hidden;
width: 70%;
}
div#lasteventimg ul {
list-style: none outside none;
margin: auto;
}
div#lasteventimg div {
display: table-cell;
}
div#lasteventimg img {
/* remove the float:left from here */
}
Orginal CSS Code
http://www.faressoft.org/BlueCristalTheme/postView.php
Result should be
few things going on here:
your comment box div has a fixed height of 100px
all the elements inside this div are absolutely positioned, which takes them out of the normal flow of the document, which results in the containing comment box div not able to wrap / stretch to fit around the children
use floats or just remove the positioning for the larger content which looks like the second <p>. use margins to position this <p>, see below
I was able to fix the problem by changing your CSS as follows:
#comments .commentBox { /* style.css line 483 */
background-color:#DCDCDC;
/*height:100px; --removed this */
min-height:100px;
position:relative;
}
#comments .commentBox .comment-content { /* style.css line 523 */
color:#676767;
font-size:0.91em;
font-weight:bold;
line-height:24px;
margin:52px 92px 0 0; /* -- added this */
/* -- removed these
position:absolute;
right:95px;
top:52px;
width:570px;
*/
}
You want the clearfix hack.
Add this to your stylesheet:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then, add class="clearfix" to your div (or clearfix to your existing div class), and it should clear that text properly.