<body>
<div id="wrapper">
<div id="title"></div>
<div id="mainimage">
<img src="mainimage.jpg" />
</div>
</div>
<div style="width:50%;">
content here...
</div>
</body>
http://susiebushphotography.com/about.html
thanks to the community here im starting to learn not to use absolute positioning- but this layout was done by someone before i started here-- so is there an easy way to remove the white space below the lion so i can use this as the ABOUT page? or do i have to redo the entire CSS layout?
thanks
Try replacing the original with this to remove the space below the lion,
#wrapper {
position:relative;
margin: 0 auto 0 auto;
width: 685px;
}
#title{
position:absolute;
top: 15px;
width: 235px;
height:265px;
background-image:url(title.jpg);
background-repeat:no-repeat;
display:block;
}
#mainimage{
position:absolute;
top: 15px;
left: 235px;
width: 450px;
height:265px;
display:block;
}
This is just a quickfix kinda stuff, and a work around.
Notice: Only tried on FF 3.5.6.
Related
I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?
First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}
Excuse the title of the post - I am at a loss on how to describe the design problem I am attempting to implement... (which is likely stopping me from finding an appropriate solution).
I have a wireframe/comp that came from my designer:
Which, in terms of a grid, looks something like this:
Now... the obvious problem is how do I make certain content span two rows or columns of a grid or table ? B/C the way I read this, either the squarish logo on the left or the 'coming soon' text on the top needs to span across two fields...
Is this even possible ?
Any help appreciated.
My solution would be to make each of the three sections a container using a div.
You can then position the elements as desired with adjustable margins and padding.
.container{
background: #333;
padding:10px;
color:white;
height:auto;
width:500px;
display:inline-block;
}
.icon{
float:left;
padding:5px;
height:30px;
width:30px;
background-color:green;
display:inline-block;
margin-right:10px;
}
<div class="container">
<div class="icon">
</div>
<div class="coming-soon">
COMING SOON TO MOBILE
</div>
<div class="downloads">
<button>
Apple
</button>
<button>
Android
</button>
</div>
</div>
If needed, you can target the coming-soon and downloads classes for more customization.
There are a number of solutions to this. Here's one using float:left and nested divs.
div {
float: left;
}
#group {
width: 200px;
height: 100px;
}
#one {
width: 100px;
height: 100px;
background-color: red;
}
#two {
width: 200px;
height: 30%;
background-color: green;
}
#three {
width: 200px;
height: 70%;
background-color: blue;
}
#four {
width: 100px;
height: 100px;
background-color: red;
}
<div id="one">
</div>
<div id="group">
<div id="two">
</div>
<div id="three">
</div>
</div>
<div id="four">
</div>
A much simpler layout would be to go.
HTML
<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>
Simple CSS
.wrapper ul li img {
display: inline-block;
width: 50%;
height: auto;
}
The fact here is, the code is simplified, the layout is easy to read, its less divs, and far more less complicated. But, truth be, theres a 100 ways to do this so find the method that fits your size shoe best.
I am playing with DIVs and want to know best method on how to achieve something.
I want to get following result:
------------------------------|
| DIV 1 |
------------------------------|
| DIV 2 | | DIV 3||
--------- --------|
| << Far right of web page
Basically want DIV 1 to appear on right hand side of the page.
Under it want some small images to appear in certain positions along the bottom of DIV 1 (maybe even so close might have to go slightly behind DIV 1)
Problem I am getting is either:
1. The images appear in same line after DIV 1
2. Can get DIV 2 in right position but DIV 3 then appears underneath DIV 2, not on same line as it
What's the best method to achieve this?
http://jsfiddle.net/A5tP2/ Not sure if this is what you were looking for, but without any code I can't really help you on what you do have. But yeah.
HTML
<div id="wrapper">
<div id="oneWrap">
<div id="one">
</div>
</div>
<div class="image">
image
</div>
<div class="image">
image
</div>
</div>
CSS
#wrapper{
width: 500px;
height: 500px;
background: blue;
}
#oneWrap{
width: 500px;
height: 100px;
}
#one{
width: 300px;
height: 100px;
background: orange;
float: right;
}
.image{
margin-top: 20px;
margin-left: 50px;
width: 100px;
height: 100px;
background: purple;
float: right;
color: white;
}
Put the smaller divs inside of another div to be able to position them more precisely:
<head>
<style>
#div1{
float:right;
}
#div-helper{
clear:both;
}
#div2{
float:left;
}
#div3{
float:right;
}
</style>
</head>
<body>
<div id="div1">1</div>
<div id="div-helper">
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</body>
I need the center div div#b to fill out the gab between div#a and div#c.
<div id="a">
<span>Div1</span>
</div>
<div id="b">
<span>Div2</span>
</div>
<div id="c">
<span>Div3</span>
</div>
I tried to do this by placing width: 100% on div#b but without luck.
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
How can I get div#b to expand from div#a to div#c?
There can be no line breaks.
CSS3
You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.
I also want to mention this new way to do it in FireFox:
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
FireFox is the only browser that support the calc function at the moment.
CSS2
Here is the old way to do it:
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.
Feature detection
Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.
If you do .NET development you can download Modernizr with NuGet.
I've hit similar problems myself. The problem here is "width: 100%" will basically inherit the width of the parent container.
The other problem is the float. When you ask div#b to float to the left alongside div#a, you can't use the fancy margin trick to force div#b to stay out of the way of div#a. (In other words, margin can be used to keep div#b from entering and interfering with a certain amount of space on any of its sides.) However, with float, the margin is now not pushing div#b away from the edge of the page, but away from the edge of div#a.
OK, so the solution looks like this. Remove the float on div#b, and then apply left and right margins so div#b doesn't interfere with either side columns. Let div#b determine its own size (i.e. don't give it a "width"), so it will fit between the two floats. Lastly, shift div#b so that the floats occur before div#b is put in place, so that div#b is put between the floats.
Here's the new code:
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
Determining margins is tricky. Borders aren't counted in the width calculation of an element, so a 50px-wide div with a 1px border is actually 52px-wide.
I have a feeling you won't like this answer, but the easiest way to do it is to remove float: left and any width from div#b, and then switch up the order of your divs, so both the sidebars are before your main content area. Here's the code:
HTML:
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS:
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
Note that I've applied overflow: hidden to the middle div - this will force it into columns (in most browsers). You could use the given margins instead, if you're not comfortable with a "magic" solution (there is a reasonable explanation for it, but I can never remember it off the top of my head).
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.