I'm really struggling to achieve clean code whilst trying to get the layout I want.
My current code isn't behaving with other floating divs on the page and the bottom section with text and buttons are not displaying inline and are forcing other elements out of position.
JSFiddle: http://jsfiddle.net/XXe4L/
I've tried various rehashings of my code but can't figure it out and am at the point where I'm starting to pull my hair out.
I'm trying to acheive a layout similar to this wireframe - https://wireframe.cc/UTHU1d.
I've copied my latest code below, minus the bottom div with text and button because I've not been able to get that anywhere near right.
CSS:
.sceneItem { clear:both; display: block; margin: 0 auto; width: 100%; }
.scenePart { display: block; width: 100%; height: 360px; float: left; }
.imgLink { margin: 0; position: relative; }
.largeImage { display: block; width: 648px; height: 360px; float: left; }
.previewImage { width: 318px; height: 180px; display: block; margin-bottom: 3px; float: left; }
.previewImage a.imgLink { }
.img { display: inline; }
and HTML:
<li class="sceneItem">
<div class="largeImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_02.jpg" class="img" alt=""></a>
</div>
</li>
I am guessing that if your floats are interfering with each other, you might try creating a block formatting context for your floated images as follows:
.box {
width:970px;
overflow: auto;
}
By doing this, any elements following will not interact with the floated images.
Note: Without the additional page elements, I can't say for sure what the problem is.
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I'm working on a photo page for a site I'm creating, however it seems that the link is extending into the whitespace beneath the image. The problem disappears when I remove the surrounding <section> but I'm not sure why.
Here's a Jsfiddle better showcasing my code and the problem
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
border: 1px solid red;
}
.photo img {
margin: 1%;
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
I added a border to the problem area. Any help is much appreciated!
because a and img are inline elements, so
make a a block level element by display:block, to the border appear around the image
set display:block to img to remove underneath whitespace caused by being an inline element. (other solution would be setting vertical-align-bottom, given img by default is vertical-align:baseline)
Note: I gave the img a max-width:100% to be responsive, and if you give the border to img instead of a, the a being display:block isn't necessary anymore, although is good to have it.
See more about inline elements here on w3
.photo {
text-align: center;
float: left;
width: 70%;
margin-left: 8%;
margin-top: 5%;
margin-bottom: 5%;
}
.photo a {
display: block;
}
.photo img {
display: block;
border: 1px solid red;
max-width: 100%;
margin: 1%
}
<section class="photo">
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
<a href="#">
<img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
</a>
</section>
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?
Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/