I want to add a scrollbar to a <div>. On the x-axis i have an overflow which I want to be shown.
But when I add overflow-y: auto to the style it cuts out the x-overflow aswell.
Here is an example: Jsfiddle
Is there a way to do that?
EDIT
Heres the code of the situation. I have a sidebar which open/closes. And the button needs to have a -margin to be visible when the sidebar is closed. You can see it in action right here: Website with sidebar
<div class="sidebar right">
<!-- Sidebaredge with button to toggle -->
<div style="width: 100px; height: 50px; margin-top: 16px; margin-left: -100px; position: relative; font-size: 10px">
<div id="openclosebutton" class="open-close-button"></div>
</div>
And here is the code from the css-file:
.sidebar.right {
top: 0;
right: 0;
bottom: 0;
width: 20%;
padding-left: 20px;
padding-right: 20px;
background-color: #659DBD;
box-shadow: 0px 0px 2px 0px #FFFFFF;
}
.sidebars > .sidebar {
font-family: 'Josefin Slab', serif;
position: fixed;
color: white;
font-size: 20px;
text-align: left;
}
I need the sidebar to be scroll-able because of different resolutions and the open-close button to be visible for the sidebar.
Why not just add both an explicit x & y overflow?
overflow-y: auto;
overflow-x: visible;
I believe this happens because setting the one overflow direction only still sets a new block formatting context Here's more info about it.
Related
I have a title and subtitle displaying in a div.
I am facing an issue when either of the title or subtitle are longer they get mixed up otherwise with shorter titles and subtitles its not an issue.
To display the title my css is
.sch-task-name {
margin: 5px 0;
}
and to display subtitle
.sch-tool-text-activity {
position: relative;
top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
}
html
<div class="sch-task-inner">
<span class="sch-task-name"> Ticket Under Needs Information 2</span>
<div class="sch-tool-ct">
<span class="sch-tool-text-activity">Kanban Deliverable</span>
</div>
</div>
Here sch-task-name displays title and sch-tool-text-activity displays subtitle.
I am new to css and dont know much of it.
Would appreciate any help!Thanks in advance!
If your goal is to get sch-task-name to display underneath sch-tool-text-activity without rearranging the content in the HTML, then you may want to use the order property of flexible items.
You'll need to set the parent container's display to 'display:flex' first. Then, since you want them to stack, you'll have to allow the items to flow onto multiple links by setting 'flex-wrap:wrap' (still on the parent container). Lastly, you'll set the order of the spans to 'order:1' and 'order:2' to rearrange their order, with '1' displaying first.
Updated fiddle: https://jsfiddle.net/ph0rn16w/1/
.sch-task-name {
margin: 5px 0;
font-size:20pt;
order:2;
}
.sch-tool-text-activity {
position: relative;
//top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
display:flex;
flex-wrap:wrap;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
order:1;
}
I'm sure I'm doing something obvious wrong, but I haven't been able to figure it out. My lightboxes size dynamically (percentage width), and I want the content within the lightboxes to scroll vertically as needed on smaller screens without displacing the border (actually a box-shadow) around the content.
As an added caveat, I need the "container" div to have dynamic height. When I set the container div to height: 100%, the lightbox functions like I want (see code below), but when I remove the height setting, the overflow no longer works right.
This demo of my lightboxes in action should help clarify my question:
http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview
Here's my CSS:
html{
height: 100%;}
body {
font-family: Verdana, sans-serif;
font-weight: 400;
font-size: 12pt;
color: #FFFFFF;
padding: 0px;
margin: 0px;
background: #FF0000;
height: 100%;
overflow: hidden;}
div.container {
background-color: #6d6d6d;
padding: 20px;
height: 100%; <!-- I want to remove this, but can't figure out a way to get the same functionality without it -->
overflow: hidden;}
div.content {
background-color: #6d6d6d;
overflow: auto;
max-height: 100%;
margin: 0px auto;}
div#tab1 {
box-shadow: 0 0 0 1px #FFFFFF inset, 0 0 0 4px #be854C inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
And my HTML:
<body>
<div class="container" id="tab1">
<div class="content">
<p>Lightbox content here.</p>
</div>
</div>
</body>
</html>
If your browser support requirements allow it, consider absolutely positioning your .container div, and setting its top, left, etc appropriately:
div.container {
background-color: #6d6d6d;
padding: 20px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
That has some downsides if you're trying to position other elements on the page, but for a lightbox, it's a reasonable solution.
I am trying to create a responsive version of my portfolio website and I am nesting my logo image and title inside the header tag. The older version used divs to float the logo and title on the left and right sides of the header.
Here is where I got stuck at when I tried to space the img and h1 without using divs.
The title is placed at the top right corner, but I don't know how to vertically center both img and h1 without using the older methods.
Layout as of Now
HTML
<header>
<img src="images/logo.png" width="203" height="41" alt="logo for Design415.com" class="logo">
<h1 class="pagetitle">PORTFOLIO TITLE</h1>
</header>
CSS
header {
position: relative;
width: auto;
max-width: 900px;
height: 60px;
margin: 0 auto 20px auto;
background-color: #333333;
overflow: hidden;
}
.logo {
position: absolute;
left: 0;
margin: 0;
}
.pagetitle {
position: absolute;
right:0;
font-family: 'Century Gothic', Helvetica, sans-serif;
font-size: 1.40em;
font-weight: bold;
margin: 0;
color: rgb(240, 240, 240);
}
To center the text vertically add line-height: 60px:
.pageTitle {
// Your styles here
line-height: 60px;
}
To center the image vertically, change the margin on top:
.logo {
// Your styles here
margin-top: 9px;
}
Here is a working JSFiddle.
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by this question on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do position: fixed, but
the header hides behind the page.
HTML:
<body>
<div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>
<div id="menu">
<ul>
<li><abbr title="Home">Home </abbr></li>
<li> <abbr title="About Us">About Us </abbr> </li>
<li><abbr title="Academics">Academics</abbr></li>
<li><abbr title="Administration">Administration</abbr></li>
<li><abbr title="News">News</abbr></li>
<li><abbr title="Contact Us">Contact Us</abbr> </li>
<li><abbr title="Photo Gallery">Photo Gallery</abbr> </li>
</ul>
<div class="cleaner"></div>
</div>
CSS:
#header {
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px; color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#menu {
position: relative;
clear: both;
width: auto;
height: 38px;
padding: 0;
padding-left:185px;
background-color:#FFFFFF;
margin-bottom: 10px;
margin-left:0px;
}
#menu ul {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu a {
float: left;
display: block;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
outline: none;
border: none;
border-top: 3px solid black;
}
I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same...
Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header's height. For example, if the header's height is 40px, put the padding-top: 50px to the body css and it should work.
When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.
This is a great feature as now you can position those elements anywhere without worring about the rest of the page.
So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.
For example, if you had the following:
<div class="header"></div>
<div class="content"></div>
Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.
<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>
You can use z-index
Which element that you want to be in front of other elements, give the z-index value higher.
Like this:
z-index: 300;//navbars
z-index: 0;//contents
When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don't exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.
CSS Z-index might be your solution
http://www.w3schools.com/cssref/pr_pos_z-index.asp
#header {
margin-top:-38px; //solution
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px;
color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}