Trying to get this image below:
But here's what I have instead:
I am using this code as follows:
HTML:
<div class="floatright" style="width: 50%;">
<div class="floatleft" style="width: 35%;">
<img src="images/exhibitingopportunities.png" alt="Exhibiting Opportunities" style="border: none; width: auto; max-width: 100%;" />
</div>
<div class="floatleft sidespadding" style="width: 65%;">
<h4>Exhibiting Opportunities</h4>
<p class="desc">The Opportunity Finance Network Conference is a great place to connect with decision makers across the industry. Reserve your booth space now—contact Katie Kirchner for more information.</p>
</div>
</div>
<div style="width: 50%;">
<div class="floatleft" style="width: 35%;">
<img src="images/sponsorship_opportunities.png" alt="Sponsorship Opportunities" style="border: none; width: auto; max-width: 100%;" />
</div>
<div class="floatleft sidespadding" style="width: 65%;">
<h4>Sponsorship Opportunities</h4>
<p class="desc">Reserve your slot now to be a part of the CDFI industry's premier event! The OFN Conference provides our partners with an unparalleled platform to connect with CDFIs, increase awareness of their organizations' work, and support and strengthen the practice of opportunity finance.</p>
</div>
</div>
CSS:
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
.sidespadding
{
padding-left: 1.2em;
padding-right: 1.2em;
}
.clear
{
clear: both;
}
Can't get the text to float to the left of the actual image, like the image in the first pic. OMG, what am I missing here? Webpage here: http://opportunityfinance.net/Test/2013conf/index.html
Get rid of your padding, your % is greater than 100% with padding.
Or you can apply box-sizing http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
If you want space you can always add margin left or right but make sure your percentage calculates to 100% at the end
So
div 1 30% width with 5% margin right for example
div 2 65% width
So total = 100%
there are other ways to accomplish this but you get the idea now
Padding adds to the total width, making it 65% + 2.4em
If backward compatibility with older versions of IE is not an issue you can use CSS calc
Otherwise you have to wrap some div in order to create padding inside the element you want.
Related
How to size/wrap a div container around an image inside It? Where float: right and margin-left: auto are potentially causing issues.
I'm struggling to get a div to be sized by wrapping properly around the image inside it. Please have a look at the example I'm referring to here:
Link to Example
(Might be worth playing around with the window size to help explain my problem)
I'm practicing with Bootstrap for the first time. The red blocks on each side are grid blocks 1 and 12, with the blue, and green sections filling the remaining 10. The big orange rectangles are responsive images that I want to be kept central spaced 20px apart at all times.
Using Chrome's "Inspect Element" (or similar) - If you inspect the orange rectangle on the right hand side, and have a look at the container div (class="container-img-r") - This div is wrapping around the orange image exactly how I wanted (albeit including the invisible border). But I'm not having much luck achieving the same result with the div container for the orange image on the left side (it still fills the blue parent element)
I've played around with different options for float/margins/position but can't seem to crack it.
Here's the CSS I have for the relevent content:
.container-img-l {
/* float:right; ??? Nothing I tried here seemed to make a difference */
}
.container-img-r {
float:left;
}
.item-pos-l {
margin-left:auto;
border-right:10px solid transparent; /* Margins just collapsed when resizing window */
height:323px;
width:510px;
}
.item-pos-r {
float:left;
border-left:10px solid transparent;
height:323px;
width:510px;
}
The reason for me wanting the div to accurately wrap around the responsive images is that I want to overlay some more CSS content over the images, scaling/re-positioning automatically as the window/device size changes (Click here and you'll clearly see where I'm hoping to implement this responsive style).
Maybe there are clashes with the Bootstrap CSS at play but I'm out of ideas.
Your first link doesn't remotely look like the html you want to make responsive. It would be best to learn responsive and fluid (no pixels heights or widths if possible) css before attempting to modify a framework you are unfamiliar with. Also, you have an error in your html - validate it to make sure you've closed all your elements. Also indent and comment all your code and avoid the use of inline styles.
Demo: http://jsbin.com/wazanu/2/
http://jsbin.com/wazanu/2/edit -- edit link
CSS:
body {background:#eee}
.header {padding:20px;}
.portfolio-grid .col-sm-6 {
margin-bottom: 30px
}
.img-wrapper .title {
text-align:center;
}
#media (min-width:768px) {
.img-wrapper {
position: relative;
overflow: hidden;
}
.img-wrapper img {width:100%;}
.img-wrapper .title {
position: absolute;
text-align:left;
bottom: -90px;
padding: 0 20px 20px 20px;
height: 150px;
background: red;
transition: all .5s ease-in-out;
}
.img-wrapper .title h3 {
margin: 0;
height: 60px;
line-height: 60px;
}
.img-wrapper:hover .title {
bottom: 0
}
}
HTML:
<header class="header text-center">
My header
</header>
<div class="container">
<div class="row portfolio-grid">
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
<div class="title">
<h3>Title of Project</h3>
<p>Content about project goes here</p>
</div>
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placebear.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
<div class="col-sm-6">
<div class="img-wrapper">
<img src="http://placekitten.com/g/400/300" class="img-responsive center-block" alt="">
</div>
</div>
<!--/.col-sm-6 -->
</div>
<!--/.row-->
</div>
<!--/.container-->
I have some images which get smaller as the browser size does.
It works well for me but as the images get smaller the space between them gets bigger.
When the browser is at its smallest, the space between images is the size of the image.
If you resize your browser slowly down to the smallest you will see the media queries kick in and see what i mean.
Ive tried that many things ive lost track.
Ive tried replicating it in a fiddle but it just requires most of my code to do so, so i can only offer the link to the page http://www.techagesite.com/page-1work1112211.htm
.top_grow{
display:inline-block;
vertical-align:top;
font-size:0;
margin:0 auto;
overflow:hidden;
white-space:nowrap;
}
.cats {width:100%;
height:100%;
display:block;
font-size:0;
}
.text{
font-size:11px;
letter-spacing:1px;
word-spacing:1px;
}
<div class="top_grow">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
<div class="text">
Mario Galaxy
</div>
</a>
</div>
It looks as though your images are being spaced out with a space character. The space character does not have a fluid width.
The solution would be to use floats.
Something like
.holder {
width: 100%;
}
.img-holder {
float: left;
margin-right: 3%;
width: 22%;
height: 100px;
background-color: #ccc;
}
img {
width: 100%;
height: auto;
}
<div class="holder">
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
</div>
This will give you four columns of images with a variable width gutter.
You will need to alter this to suit your own purposes, but I hope this sends you in the right direction.
Try it out in a new file first, then apply what you learn to your specific issue and this should work fine.
I am having an issue with my webpage.
My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.
Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..
My layout is basic..
<body>
<div style="width:100%; margin-top: -18px; clear: both;">
<div style="width: 100%; height: 100px; background-color: white;">
<p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
</div>
<div style="width: 100%; display: block; overflow: hidden; ">
<div><li>About</li></div>
<div><li>Books</li></div>
<div><li>Electronics</li></div>
<div><li>Apparel</li></div>
<div><li>Activities</li></div>
<div><li>Engagement</li></div>
</div>
<div style="float: left; background-color: white; margin-left: 80px;">
</div>
<div id="left-col" style="clear: left;">
</div>
<div id="central-col">
</div>
<div id="right-col" style="text-align: center; clear: right; ">
</div>
<div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
</div>
</body>
It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)
For your solution, I think you have to remove
width: 100%
from second and third div.
You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.
Also I want to know the use of
overflow: hidden;
in your code.
I'm stuck again with css positioning. I would like to create a page which shows one in the middle, surrounded by 10 other ones. Of course, it should look the same on every resolution (mobiles excluded).
But as i change the screensize, the site keeps on changing its look.
HTML
<div class="wrapper" id="wrapper">
<div class="element" id="element-1">Lorem1</div>
<div class="element" id="element-2">Ipsum2</div>
<div class="element" id="element-3">Lorem3</div>
<div class="element" id="element-4">Ipsum4</div>
<div class="element" id="element-5">Lorem5</div>
<span class="break"></span>
<div class="background" id="background"><span>Neologizmo</span></div>
<div class="element" id="element-8">Ipsum8</div>
<div class="element" id="element-9">Lorem9</div>
<span class="break"></span>
<div class="element" id="element-10">M10</div>
<div class="element" id="element-11">M11</div>
<div class="element" id="element-12">12</div>
</div>
CSS
http://nopaste.info/f6d200c414.html
Oups, already accepted an answer :$
Well anyway, since I was working on it, here is a generic solution. The idea is that you always have numberOfsquares/2 -1 squares at the top and bottom, and always one square on the left and one square on the right.
here is a fiddle: http://jsfiddle.net/PyU87/
It will display depending on the wrapper size which depends on the browser size. So this would also work on smartphones.
How does this work? You said you didn't want layouts to change as the screen changes size so I made it use fixed widths and be inside a wrapper so that can't happen.
DEMO
#wrapper {
width: 450px;
height: auto;
padding: 10px;
}
div {
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
margin: 5px;
}
#background {
width: 212px;
padding: 0;
}
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.