I got this CSS layout: http://www.cssdesk.com/Lgg4q
HTML
<div id="wrap">
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
</div>
CSS
body {
background-color: grey;
font: 18px/ Times;
color: black;
}
body, html {
height: 100%;
width: 100%;
}
p { text-align: justify; }
#wrap {
width: 80%;
margin-left: 10%;
padding-top: 2%;
position: absolute;
font-size: 14px;
background: yellow;
}
.info {
margin-right: 5%;
padding-top: 2%;
float: left;
}
.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
float: left;
margin-right: 1%;
margin-top: 1%;
}
When you resize the browser window (smaller), you can see that the behavior of the divs basically breaks the design. How to handle this problem?
My thought was to give the #wrap a height, but that won't work like it should.
Here's how I'd do it. http://jsfiddle.net/joplomacedo/TYjd5/ (I couldn't figure out how to save the changes in cssdesk so I transfered it into jsfiddle)
Basically, I added a 'wrapper', which I called block around each of the image and info blocks. I gave them a width and floated them. This way, when the browser is resized, the info and the image always go together.
Was this the behavior you were looking for. What would you want to happen on the browser resizing?
You can use min-width on #wrap and set a pixel value to prevent it from breaking.
DIV elements don't behave well when used with percentages or I can say they are not meant to be used so. You have two options in this kind of situation:
Make the design of your page in such a way that it looks like it's not responding to the browser's window resize. Take as an example this very website.
Resize your containers accordingly when the browser's window is resized. To do this you will need to use Media Css classes or maybe jQuery.
Related
I'm trying to make a design that utilizes white space.
I have an image that I want on a white background. I have a class that has a white background, and the image itself (which also has a white background as part of the image). I'm having an issue where I can't ensure that the div class is the same height as the image itself if I have both be responsive.
I've tried adding a second image with the same height as the initial image that is just white space, setting the div to be responsive, and a bunch of other things, but I'm not sure what the best way to do this would be. The page itself is up at http://jamieaurora.com/devinTribute.html to get an idea of what I'm going for (though the code is a bit out of date than what I'm posting here). If anyone could point me in the right direction, it'd be greatly appreciated. I cut out the portions of the code that I don't feel are relevant, but if you would like to take a look at the full HTML file, it is located in this hastebin. Thank you so much!
https://hastebin.com/tifiqaciri.xml
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.responsive
{
width: 100%;
height: auto;
}
.hero-section
{
background-color: white;
font-family: Oswald;
letter-spacing: 4px;
top: 0;
height: 64%;
width: auto;
padding-top: 5%;
padding-bottom: 1%;
}
</style>
<body>
<nav>
<ul id='navbar' style="z-index:0;">
<li><a class = "active" href="index.html">Home</a></li>
</ul>
</nav>
<section class="hero-section" id="hero-section">
<div class = "container-fluid">
<div class = "row">
<div class="col-xs-6">
<img src = "images/devin-townsend-evermore.jpg" class="responsive" ></img>
</div>
<div class="col-xs-6">
<h1 style="padding-left: 62%" class="responsive">Title Text</h1>
<h2 style = "padding-left: 60%; font-size: 140%; align: left;" class="responsive">Paragraph Text</h2>
</div>
</div>
</div>
</section>
I had a parent div container with two main components side-by-side. I had an image on the right that was responsive. I wanted the text on the left side to stay in the centre and to the left of the image as it changed size depending on the browser's screen size.
I set the parent's container height to the same size as the image in its original form but in em.
Using a combination of height: auto and max-height: 100% worked for me.
The return in my React Component was:
<div className="videoAndDescription">
<div className="left33">
<div className="textToSquare">
<h1>Firewood, delivered...</h1>
</div>
</div>
<div className="right66">
<img src={stoveburning} />
</div>
</div>
My CSS:
.videoAndDescription{
display: flex;
flex-direction: row;
background-color: red;
height: 40em;
}
.left33{
color: orange;
display: flex;
justify-content: center;
align-content: center;
width: 60%;
}
.left33 .textToSquare{
height: auto;
background-color: black;
}
.right66{
width: 40%;
}
.right66 img{
max-height: 100%;
}
I am trying to center three divs inside of another div. I cannot seem to get it to work. My site is responsive, maybe this has something to do with it? Here is the code and CSS I have so far, any help is much appreciated!
I am trying to have all three divs .hp-highlight centered within .home-highlights:
<div id="home-highlights" class="clearfix">
<div class="heading">
<h2><span>What We Do</span></h2>
</div>
<!-- /heading -->
<div class="hp-highlight ">
<img src="http://kompufast.com/wp-content/uploads/2012/06/kompufast_sales1.jpg" title="Sales" class="hp-highlight-img" />
<h3>Sales</h3>
<p>KompuFAST+ is the right company to help you address your need for all kind of consumer technology products.</p>
</div>
<!-- /hp-highlight -->
<div class="hp-highlight ">
<img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_order1.jpg" title="Order" class="hp-highlight-img" />
<h3>Order</h3>
<p>KompuFAST-Order facilitates the ordering of products, without a fee for special order.</p>
</div>
<!-- /hp-highlight -->
<div class="hp-highlight highlight-third ">
<img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_fix1.jpg" title="Fix" class="hp-highlight-img" />
<h3>Fix</h3>
<p>KompuFAST+ has a team of dedicated repair technicians ready to diagnose your computer for all sorts of problems.</p>
</div>
Here is the CSS I have been trying:
.home-highlights {
margin-right:auto;
margin-left:auto;
width: 100%;
}
.hp-highlight {
width: 280px;
}
Won't work in IE7 or lower, but here you go.
.hp-highlight {
display: inline-block;
width: 280px;
vertical-align: top;
}
If you need IE7 and lower support, you'll have to use float.
.hp-highlight {
width: 280px;
float: left;
}
Centering of all 3 items after that point will either be by using text-align: center on .home-highlight or wrapping those 3 in another div and setting the left/right margins on it to auto.
add margin:auto; to your .hp-highlight class
here is how your css should be
.hp-highlight {
margin:auto;
width: 280px;
}
see working here: http://jsfiddle.net/RhMZ7/1/
This will work even in IE7; no floating necessary.
.home-highlights {font-size: 0; text-align: center;}
.hp-highlight {
display: inline-block;
*display: inline;
vertical-align: top;
width: 280px;
zoom: 1;
}
I am attempting a very simple procedure here, basically trying to center the client logos within this main clients div. I've just recently started with this web design business and while I can read some of the solutions out there, I'm having trouble applying them to my structure.
Basically I have a few client boxes, each is going to have a PNG image inside of them:
<div id="clients">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>
I'd like to be able to center the client-box's on the client's div that has a fixed weight. I've tried using display: inline-block but that didn't seem to do much. I'm assuming that's because I've already forced them to float: left but I don't know how I can maintain their position in the div without doing so. Like I said I'm quite a novice with CSS and this is what I've been doing for all my CSS.
Here's what I have for clients and client-box CSS:
#clients {
background-image: url("img/images/clients_bg.png");
border-bottom: 1px solid #333333;
border-top: 1px solid #666666;
float: left;
margin-top: 120px;
padding: 10px;
width: 778px;
}
.client-box {
background: none repeat scroll 0 0 #bcb546;
float: left;
font-family: verdana;
font-size: 11px;
height: 60px;
margin-right: 10px;
opacity: 0.8;
padding-top: 40px;
text-align: center;
width: 100px;
}
.client-box:hover {
opacity: 1;
}
From my understanding, this shouldn't be hard to achieve, but so far I have not had any luck probably because my brain is fixated on a certain way of doing things and it just won't budge. Any help would be greatly appreciated.
You can see the live site here.
Thank you SO.
I've tried using display: inline-block
but that didn't seem to do much.
float: left forces display: block, so display: inline-block would have no effect.
On .client-box, you need to:
remove float: left
add display: inline-block.
Finally, on the parent element (#clients), you need to add text-align: center.
If your outer div is of a fixed width you can set the margins for the inner div to take up the appropriate space.
eg:
<div class="outer">
<div class="inner">
stuff
</div>
</div>
CSS
.outer { width: 600px; }
.inner { width: 400px; margin-left: 100px; margin-right: 100px; }
Alternatively you can use margin-left: auto; margin-right: auto; however that (like everything else in the world) doesn't work in IE.
Hope this helps!
I will add a wrapper to the client-boxes, whose width is equal to the total width of client-boxes.
For example, in the live site you post above, there are 5 client boxes, and each of them are 100px width with 10px margin-right. So add a div wrapper with width 5 x (100 +10) = 550px, and center the wrapper with "margin-left:auot" and "margin-right:auto".
<div style="width: 550px;margin-left: auto; margin-right: auto;">
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
<div class="client-box">CLIENT LOGO</div>
</div>
It doesn't stay where I want it, look at this:
<div style="float: left; width: 30%">
<img src="{avatar}" alt="" />
</div>
<div style="float:right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
Internet Explorer:
Mozilla Firefox:
I want the text to be in the top (tried vertical-align: top), and i'd like the image to be in the white box in IE.
Hope someone more skilled can help me out.
Thanks!
Can't figure out the problem :/
Edit: Added whole code
* { padding: 0; margin: 0; }
body {
font: 11px Geneva, "Trebuchet MS", Arial, Verdana, sans-serif;
width: 999px;
background: #EFEFEF;
}
#content {
width: 400px;
}
.thread-content {
padding: 5px;
border: 1px solid #CECFCE;
background: #FFF;
}
div.header {
border: 1px solid #CECFCE;
background: #FFF;
margin-bottom: 10px;
}
<div id="content">
<div class="header">{title}</div>
<div class="thread-content">
<div style="float: left; width: 30%; padding: 5px">
<img src="{avatar}" alt="user avatar" />
</div>
<div style="float: right; width: 70%; text-align: left">
{message}
</div>
<div style="clear:both"></div>
</div>
</div>
Be sure the margin of both are set to 0:
<img src="{avatar}" alt="" style="float: left; width: 30%; margin: 0px"/>
<div style="float:right; width: 70%; text-align: left; margin: 0px">
{message}
</div>
<div style="clear:both"></div>
As css can be really tricky, some other solutions to try:
Let both float left, should make no difference.
Make sure the border doesn't increase the size.
Descrease the width of one a bit, IE is stubborn.
This happens because the sum of the (external) widths of the two floating divs is larger than the internal width of the external box, so they don't fit in the same row.
Try increasing the width of the external div, decreasing its padding, decreasing the width or margin or padding of the internal boxes.
Code works fine when I tried it. You sure there isn't any padding or margin on the image or the text? That would mess up the percentages you're using. If you have it examine the image and text in Firebug to see what styles are being applied.
When you say width: 30% or width: 70% it implies the width of the content inside the div excluding the padding, border and margin of the div. Looking at the images I am sure you have added some padding etc to both divs. Also I do not see any 'background: #fff' in your code, so I am not sure which one is the 'white' box.
Ok, did I get voted down because I used a table?
I am not by trade a designer, I am actually a programmer and I know there are hard-core css designers that cringe at the idea of using a table layout but it seems to works for me. The graphic designers that I work with give auto generated table layout from fireworks to work with which is a real pain.
Anyway the way I personally would try to accomplish the dersired effect though pure css would be more like.
<html>
<head>
<title>SandBox</title>
<style type="text/css">
#outerDiv
{
margin:0;
background-image:url(myImage.gif);
background-position:top left;
background-repeat:no-repeat;
padding-left:30%;
min-height:200px;
background-color:#777777;
}
#innerDiv
{
background-color:#333333;
}
</style>
</head>
<body>
<div id="container" style="width:500px;">
<div id="outerDiv">
<div id="innerDiv">content goes here</div>
</div>
</div>
</body>
Note: I am not a designer. I also made this a wiki. So please edit or at least leave a comment if you going to vote down.
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/