I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
Related
I am creating a website about UFC and need help with my image positioning I have 3 images and want to place them in a horizontal arrangement across the screen but am having trouble doing this.I have created a div around each of the images to try and position them but cannot seem to get the result that I want, any help would be great.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.html">
<link rel="stylesheet" type="text/css" href="topfightercss.css">
<h1><u>Top Fighters</u></h1>
</head>
<body>
<div id="demetrious">
<img src="dem.png" alt="Demetrious Johnson"> <p> Demetrious Johnson is the
rank 1 pound for pound fighter in UFC,<br>he is from Kentucky USA and is
aged 31 and stands at 5'3 (160cm)<br>he weights 56kg (125lb) and has a reach
of 66" with a leg reach of 34".<br>He has a record of 27 wins 2 losses and 1
draw and is the curent<br> flyweight champion. </p>
</div>
<div id="connor">
<img scr="connor.png" alt="Connor Mcgegor">
</div>
<div id="daniel">
<img scr="daniel.png" alt="Daniel Cormier">
</div>
</body>
</html>
CSS
html {
background: url(pg2background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
color: aqua;
text-align: center;
font-size:24pt;
}
.demetrious {
position: relative;
top: 8px;
left: 12px;
width: 450px;
height: 300px;
opacity: 0.3;
}
p {
color: aliceblue;
}
.connor {
position: center;
top: 8px;
right:12px;
}
.daniel {
position: relative;
}
You can set up a container div with class .container with a fixed width of x pixels, x = 3 * image width, because you have three images. Only use this if you want the images to stay horizontally aligned when the browser window is smaller than the width of 3x
.container{
width: x px;
}
Then give a shared class to your image divs, let's call it .imgClass. Now turn them to float;
.imgClass{
float:left;
}
EDIT: This means your topfightercss.css css file should include something like this:
.container{
width: 300 px; //Three times 100px = 300px
}
.imgClass{
float:left;
width: 100px; //All pictures are 100px wide. Not required.
}
And your html file:
<div class="container">
<div class="imgClass"> <img><p>...</p> </div> <!-- demetrious -->
<div class="imgClass"> <img><p>...</p> </div> <!-- connor -->
<div class="imgClass"> <img><p>...</p> </div> <!-- daniel -->
</div>
Bourbon/Neat has a neat feature that provides automatic rows (http://neat.bourbon.io/examples/) but I cannot get this feature to become responsive. In my example I use 4 columns for large screens, and 3 columns for medium screen. The 4-columns layout show up nicely, every 4th div wraps to a new row. When I reach the media query point, the layout breaks apart. The divs wrap unexpectedly.
the sass:
#import bourbon/bourbon
#import neat/neat
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(3)
+omega(4n)
border: 1px solid red
+media($medium-screen)
+span-columns(4)
+omega(3n)
border: 1px solid green
Some example html:
<head>
<meta charset="utf-8" />
<!-- Standard Meta -->
<link rel="stylesheet" type="text/css" href="sass.css">
</head>
<body>
<div class="content">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3 <br> foo </div>
<div class="child">child4 </div>
<div class="child">child5</div>
<div class="child">child6</div>
<div class="child">child7</div>
<div class="child">child8</div>
<div class="child">child9</div>
<div class="child">child10</div>
</div>
</body>
</html>
Does someone know when if the 'automatic' row feature can be used with media queries, and if yes how to do it?
The problem comes from the Neat way to clear floats.
When you're over 992px, Neat uses this CSS:
.content .child:nth-child(4n+1) {
clear: left;
}
And when you're under 992px, it uses this CSS:
#media screen and (max-width: 992px) {
.content .child:nth-child(3n+1) {
clear: left;
}
}
Neat doesn't "cancel" the clear: left on .content .child:nth-child(4n+1). You then have a clear: left on the 4th and on the 5th element. To avoid this problem, you'll need to encapsulate every +omega() in it's own media query.
Here is a Sass example to fix the issue:
#import bourbon/bourbon
#import neat/neat
$large-screen: new-breakpoint(min-width 993px 12)
$medium-screen: new-breakpoint(max-width 992px 12)
.content
border: 1px solid blue
.child
+span-columns(4)
border: 1px solid green
+media($medium-screen)
+omega(3n)
+media($large-screen)
+span-columns(3)
+omega(4n)
border: 1px solid red
You can use this to fix the problem;
https://github.com/joshfry/omega-reset-for-bourbon-neat/tree/master/dist
My website is http://picofdel.org/services/educators-professionals/professional-development.html
I have added a custom HTML module at position content-top-b for skip navigation link.
The code is
<div id="main" style="width: 0px; height: 0px; border: none;"> </div>
But, a thin border is appearing on the page around the module. Please tell me how to remove the border.
Add these stylesheet to your head or body. Otherwise you can add this simple line to your css-file (without script tag).
<style type="text/css">
.module-outline-2 { border: none !important; }
</style>
the border will be defined on following file:
http://picofdel.org/templates/ca_cloudbase2_j25/css/template.css on Line 316:
#rt-top .module-outline-2,
#rt-content-top .module-outline-2,
#rt-content-bottom .module-outline-2,
#rt-bottom .module-outline-2{
border: 1px solid #e6e6e6;
}
I added a BG images to the body of a html document. after config of size and other properties, the head and list have just removed themselves. I looked at the webpage index file via web inspector, and they are physically there. just not displayed.
and ideas why this behavior would happen?
if you guys need to see the code just ask.
thanks in advance...
~Ryozaki
A couple of HTML issues...
Your <title> needs to go inside of your <head></head> tags.
You can't put <div> tags between your <head></head> tags.
You're missing a closing </head> tag
Try this:
Insert a <head> tag before your <title> tag.
Then change your <head> tag after </title> to </head>
You need to review your positioning rules
If you have an element positioned as absolute it will overlay any elements below it, unless you position the elements below to absolute as well or position them to relative with a z-index greater than 0.
But for your particular case you don't need to add absolute positioning to your image, just leave it as static and it solves your problems.
here is the your css code revised and works (per as your Fiddle):
#font-face {
font-family: 'FlexDisplay-Thin';
src: url('mywebsite/fonts/FlexDisplay-Thin');
src: local('?'), url('FlexDisplay-Thin') format('ot'), url("FlexDisplay-Thin") format('truetype'), url(FlexDisplay-Thin) format('avg');
}
h1
{
font-family: 'FlexDisplay-Thin', arial, sans-serif;
}
#bg {
position: static;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: static;
margin: auto;
min-width: 50%
min-height: 50%;
z-index:0
}
#navigation{
width: 550px;
height: 35px;
font-size; 16px;
font-family: 'FlexDisplay-Thin', arial,sans-serif;
text-align; center;
}
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.