I'm trying to figure out why padding is included in this scrolling content for Chrome (Mac Version 27.0.1453.110) but not in Firefox (Mac 21.0). I'm using the box-sizing: border-box; When I hit the bottom the scrolling content the padding is there in Chrome, but in Firefox the last element is the bottom, there isn't any padding below. Should I be using margin instead? Is this a bug for 1 of the browsers?
I have an example on codepen
CSS:
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
background-color: #222;
}
p {
padding-bottom: 20px;
}
.boxy {
background-color: #111;
border: 4px solid #FFFFFF;
height: 442px;
overflow: auto;
position: relative;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 722px;
}
.inside-boxy {
background-color: #ff6000;
height: 160px;
padding: 12px 50px 50px 28px;
position: absolute;
overflow-y: scroll;
}
.in-links {
background-color: #fff;
height: 132px;
margin-top: 22px;
width: 600px;
}
HTML:
<html>
<head>
<title>Paul Irish Box Model FTW</title>
<meta charset="utf-8">
</head>
<body>
<div class="boxy">
<div class="inside-boxy">
<p>...</p>
<p>...</p>
<div class="in-links">links!</div>
</div>
</div>
</body>
</html>
.inside-boxy has a fixed height. I would not issue the padding through that container. Instead, I would issue the padding and margin properties of the components inherent to .inside=boxy. I re-wrote your CSS below. Let me know if you have any issues.
p {
padding:20px;
}
.boxy {
background-color: #111;
border: 4px solid #FFFFFF;
height: 442px;
overflow: auto;
position: relative;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 722px;
}
.inside-boxy {
background-color: #ff6000;
height: 160px;
position: absolute;
overflow-y: scroll;
width:100%;
}
.in-links {
background-color: #fff;
height: 132px;
margin:20px 0 20px 0;
width: 100%;
}
Related
I Need Help.
I want to create a hero-image, but I'm having trouble positioning the text.
I want it to look like this:
enter image description here
When I do it my way, then I have a problem with RWD positioning later.
Maybe it is possible to do it somehow simpler?
<header>
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>Zięba</h1>
<p>gallery</p>
</div>
<i class="fas fa-chevron-down"></i>
</header>
header {
.hero-img {
position: relative;
height: 100vh;
width: 100vw;
background-image: url('../img/Kapiaca-sie-small.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -2;
overflow: hidden;
.fa-chevron-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 95%;
color: $white-color;
font-size: 35px;
}
}
.hero-text {
position: absolute;
transform: translate(1430px, -50px);
height: 100%;
z-index: 5;
h1 {
color: $black-color;
font-size: 30rem;
font-family: 'Disclaimer', sans-serif;
}
h1::before {
content: 'Sławomir';
position: absolute;
display: inline-block;
transform: rotate(270deg);
top: 312px;
right: 180px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
color: $green-color;
}
p { position: absolute;
top: 540px;
right: 10px;
text-transform: uppercase;
color: $brown-color;
font-size: 1.6rem;
}
}
I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY
header .hero-text {
position: absolute;
right:40px;
height: 100%;
z-index: 5;
}
Just use Right Property to fix position.
I have tried everything, including "text-decoration: none;" and making sure all padding is removed. Should be a pretty basic and elemental procedure but nothing works.
Yes, I have read all I can find here and tried it or looked elsewhere on the net for a solution. Nothing is working.
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<style>
#main-nav {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 100%;
height: 30px;
margin: auto;
padding: 0;
text-decoration: none;
background-color: #D6D5D6;
list-style-type: none;
text-align: center;
}
.nav-list {
text-decoration: none;
text-align: center;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 1000px;
margin-: auto;
padding: 0;
}
.nav-list > li {
margin: 0;
float: left;
width: 200px;
height: 30px;
position: relative;
line-height: 30px;
}
.nav-list > li > a {
width: 200px;
height: 30px;
text-align: center;
padding-top: 12px;
list-style-image: none;
}
.nav-list > li > a:hover {
background-color: #FFF;
}
#dropdown {
position: relative;
top: 30px;
width: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
list-style-image: none;
list-style-type: none;
color: #F00;
}
.dropdown: li{
background-color:#697;
position:relaive;
width:200px;
height:30px;
text-decoration: none;
}
.dropdown: li a {
color: #ddd;
text-decoration:none;
position: absolute;
width:200px;
height:30px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown: li a:hover {
background-color: #CCC;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#transbar {
position: absolute;
z-index: -1;
width: 1000px;
left: 0px;
top: 0px;
}
#wrap {
width: 1000px;
top: 668px;
position: absolute;
margin-right: auto;
margin-left: auto;
}
#textbox {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
height: 575px;
width: 1000px;
position: absolute;
z-index: -1;
margin-top: 80px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
</style>
<div id="wrapper">
<body>
<nav class="main-nav">
<ul class="nav-list">
<li>About
<ul style="list-style: none;" class="dropdown">
li>The Film</li>
<li>The Park</li>
</ul>
</li>
<li>Updates
<ul style="list-style: none;" "dropdown">
<li>Slideshow<li>
</ul>
</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Add this to your CSS to remove underline effect for <li> links:
a:link {
text-decoration: none;
}
As for displaying <li> elements in the center of the page I've provided a simplified version of your code that centers each <li>.
HTML:
<ul>
<li>About</li>
<li>The Film</li>
<li>The Park</li>
<li>Updates</li>
<li>Slideshow</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
a:link {
text-decoration: none;
}
ul {
text-align: center;
list-style-type: none;
}
ul li {
display: inline-block;
}
NOTE: you may want to adapt this to your current code, next time you ask a question like this probably best to post a link to a jsfiddle example of your code.
I got it to work. Fooling around with the width in the CSS "Box" attribute did the trick. I am using Dreamweaver as my text editor, btw. A width of 123px added to the ul CSS script did it for the first listed column. For the ul li column I had to mess with that as well. A measure of 68px on the width centered that. I don't know why this works, and as you tell I'm a novice at this.
I'm trying to make my first website in Dreamweaver, and I've run into a problem I can't seem to fix. I have a div containing an unsorted list, and the elements of the list are rollover images. There are 5 images, so I have 3 on the first line and 2 on the second line. They are sized to be a certain percentage of the page.
I want the div to extend down to the end of the bottom row of images automatically, I do not want to have to hard code the value for the size. I have the div size set to auto, but it does not seem to recognize the images in the unsorted list. It is sizing its self to 0, so all the images are overlaying everything that comes after the div.
If I manually resize the div it fixes the problem, but I'm not sure I want to do this.
Is there anyway to fix this issue without hard coding the height of the div?
Here is the html code for the list of roll over images..
<div id="rolloverlocs">
<ul>
<li><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></li>
<li><img src="images/Denman.jpg" alt="" id="Image3"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></li>
<li><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></li>
</ul></div>
And for this part of the css style sheet ..
#rolloverlocs ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: auto;
display: block;
}
#rolloverlocs img {
width: 31%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
float: left;
border-style: solid;
border-color: #000000;
background-color: #E5E9E2;
height: auto;
}
#rolloverlocs {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
try add this style:
#rolloverlocs ul {
overflow:hidden;
}
demo
or you can use this:
html,body{
width:100%;
}
*{
margin:0;
padding:0;
}
#rolloverlocs ul {
list-style: none;
width: 100%;
display: block;
overflow:hidden;
}
#rolloverlocs li{
display:block;
float:left;
width:33%;
}
#rolloverlocs a{
display:block;
width:100%;
height:auto;
}
#rolloverlocs img {
width:94%;
margin:1%;
display: block;
background-color: #E5E9E2;
height: auto;
padding:2%;
}
#rolloverlocs {
width:100%;
}
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
I'm creating a liquid j-query slider using Mark Tyrell's blueberry plugin (all hail!), but am having a problem with thumbnail images not re-sizing in Safari (mobile or desktop) that work in IE 8, and Firefox 7.01 and Opera 9.5.
You can see the (almost) working page at http://development.carrollorganization.com/blueberry3.php
IN Safari, the thumbnail images do not shrink to fit the height of the container (div called thumbnail) and are not restricted to overflow:hidden in that container. They do obey the overflow:hidden command in the div's parent (an a tag). The big issue is the refusal to re-size to fit the height of the parent div tag.
I honestly don't know if this is a Safari bug, a box-model problem, user-error (could be likely) or some combination of all. I would appreciate any help anybody can give. If I cou
My style sheets are:
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }
#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc {
margin:0px;
padding:0px;
width:100%;
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}
.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; /*position: relative; */}
.blueberry .crop li img { width: auto; }
.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li {
overflow:hidden;
display: block;
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active {
background-color: #F00;
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000;
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important;
margin:5%;
border:1px solid #fff;
}
.blueberry .pager div.thumbNail img {
display:block;
float:left;
height:100%;
width:auto;
}
My page code is (it's a php page, not html):
<div id="doc">
<div id="content">
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="images/slider_images/slider_01.jpg"/></li>
<li><img src="images/slider_images/slider_02.jpg"/></li>
<li><img src="images/slider_images/slider_03.jpg"/></li>
<li><img src="images/slider_images/slider_04.jpg"/></li>
</ul>
<ul class="pager">
<li><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></li>
</ul>
</div>
height: 100% is not working as you might expect it to
I'd choose
.blueberry .pager div.thumbNail {
position: relative
.blueberry .pager div.thumbNail img {
position: absolute;
top: 0px;
bottom: 0px;
}
additionaly