I am making a fullscreen website, and I would like to have a scrollable div to display text content ; here is my page : http://www.jeremy-dutheil.fr/barconniere/pages/enterprise
You can see that the scrollbar appears on the body, but this is not what I want ; I would like the scrollbar to appear only on the div content, and not on the body.
Any ideas ?
Thanks
Apply this style in your global.css
Line 109 I think, change your style in your #enterprise #textContainer {}
Like so...
#enterprise #textContainer {
background-color: #FFFFFF;
height: 445px;
margin: 20px auto;
overflow: auto;
padding: 20px 0 20px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
This code is just to show you how your div with your scrollbar will look like. You may further customize it according to your liking.
The style code above shall output a page similar to [BELOW IMAGE]. Look at that scrollbar, It's cute.
Related
I am working on a simple html webpage that contained a footer But the footer does not work correctly !
I want the footer be at the bottom of the page but ... !
and this is the problem :
here is a demo of my webpage ( sorry for the language ;) ) :http://gooloop.ir/dl/site/temp.html
Add overflow:hidden to .content.
The content was collapsing upon itself as it didn't have any defined dimensions, and thus the footer was placed over it.
.content {
width: 962px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
margin-top: 20px;
overflow: hidden;
}
It will work. Tested in the dev tool.
I am developing a theme on my website using Thesis 2. I just modified the classic responsive theme.
I created an id using the div tag called "header-middle-sub". And here's the code that I used:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
It works great on a browser using a desktop. But since it is responsive theme, when I open the site in a tablet or mobile phone, the width occupies a fixed 897px.
If I remove this line width: 897px; the title is centered on the screen. So what is the code to retain the position of the title?
BTW, here's my website http://bit.ly/1cuTmtE.
Update:
Can anyone please visit my site and use the "inspect element" of chrome or firefox?
Here's the CSS of my header section:
.header {
margin: 0 auto;
padding: 0px;
background-color: #C4C4C4;
}
#header-top {
background-color: #7ED7F2;
}
#header-middle {
background-color: #6699CC;
border-bottom: 5px solid #0f3158;
border-top: 2px solid #0F3158;
padding: 20px 0 20px 0;
}
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
width: 897px;
}
#header-bottom {
background-color: #0099CC;
}
#header-container {
display: table;
margin: 0 auto;
}
Here's the layout on my theme using thesis 2.
It doesn't work for desktop too! Make your browser window very small and you will see the horizontal scrollbar. The width is always fixed.
To avoid this behavior, use the following css code:
#header-middle-sub {
background-color: #6699CC;
display: table;
margin: 0 auto;
max-width: 897px;
width: 100%;
}
Now, it will always try to stretch the div over the whole browser window, but the max-width restricts it to 897px, but less is possible, and less will be used on mobile phones or when you resize your browser window.
float: left;
read about it here :
http://www.w3schools.com/css/css_float.asp
Try to use float property: float:left;
The property text-align: left will work for this, but still it will be clear after some more details of problem or a fiddle
You should use media queries to change the width of the container based on the resolution. And by the way. The problem is that margin: 0 auto means: "get my current width and position me in the center with equal margins on the left and right. So, if you want to use margin then you need media queries to dynamically change the container's width.
I know it may sound stupid but I'm trying to change the background position for an 'anchor element' but I get no result.
The HTML looks like this:
Link
For the .second-link:visited I want to change the background position, I have no idea why it doesn't work.
Update
The css for .second-link looks like this:
.second-link { background: url(../images/sprite.png) no-repeat -13px -124px; height: 20px; width: 15px; display: inline-block; margin: 2px 0 -6px 2px; }
There is no content inside your a tag with the second-link class. Therefore it will not be visible on the page as both its width and height will be 0px. Adding some content content inside it will fix it, or if you don't want any content inside it, you'd have to set the a tag to display: inline-block; and set a width and a height on it to ensure that it is visible on the page.
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}
Hello i am looking for solution to do that:
http://www.delightfulwoman.pl/depilacja-laserowa/
When you click on the link on the left, the text changes inside right box...
I just want to know how to make that CornerRounded SemiTransparent div background, with scrollbar NEXT to it, not inside it.
You would say i can look into source file, but i am not that good at CSS, and i cant see transparency or opacity there :s or anything similar.
This website is using an image as the background for that DIV. They are using a PNG file which supports transparency. So in the CSS for the DIV (.o_right_cont) they are using an image of a rounded and translucent box instead of any fancy CSS.
On the inside of that DIV they have another DIV (.ofe_desc). They set the overflow to auto so that way the scrollbar would appear when the content is larger than the DIV.
.o_right_cont {
background: url(gfx/cennik_bg.png) no-repeat;
width: 670px;
height: 420px;
float: left;
margin: 10px 0px 0px 30px;
text-align: left;
padding: 10px;
}
.ofe_desc {
width: 662px;
height: 400px;
text-align: left;
overflow: auto;
line-height: 15px;
padding: 8px 30px 8px 8px;
}
Let me know if you have any questions.
Kind Regards,
- Chris