I have an assignment where I have to create a website that looks like:
example site
I have created this so far:
I cant remove the white space in between the two divs. I use float:left and float: right
this is the CSS code:
#Vsebina {
width:auto;
position: relative;
left: 200px;
top: -22px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh, #Tretji.Dno, #Cetrti.Dno, #Peti.Dno, #Sesti.Dno {
width: 400px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 5px;
}
#Vsebina #Prvi.Vrh, #Drugi.Vrh {
border: 2px;
border-style: dashed;
border-color: red;
max-height: 200px;
}
#Vsebina #Prvi.Vrh p, #Drugi.Vrh p{
height: 140px;
overflow-y: scroll;
}
#Vsebina #Drugi.Vrh, #Cetrti.Dno, #Sesti.Dno {
float: right;
}
#Vsebina #Prvi.Vrh, #Tretji.Dno, #Peti.Dno {
float:left;
}
The HTML is normal layout, I haven't done any styling in HTML, only the content is there. The file is also too wide, so it makes it vertically scrollable, which is something I want to also get rid off. Thanks.
Float left pulls the content to the left of its parent div and float right pulls the content to the right of its parent div.
Seeing by the css code you just need to apply float left. Remove float right to get the desired result.
-Thanks
Related
I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.
EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.
$('.cross').html('?');
#island{
margin: 20px auto;
border-radius:10px;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')
}
#crosses{
line-height: 0;
position: relative;
top: 50px;
left: 50px;
}
.crosses-row{
}
.cross{
display: inline-block;
width: 50px;
height: 50px;
}
I've made a fiddle here.
Here is the working fiddle
https://jsfiddle.net/6zkLvLeg/1/
Add the following code to ur .cross
.cross {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
vertical-align: top;
text-align: center;
}
Add vertical-align: top; to css class cross and remove line-height: 0px; from #crosses
I have a <div> called "bottom" which holds 2 divs together. The 2 divs inside are "manufacturers" and "main" which are located side by side with each other. What I want is that the <div id="bottom"> must be auto resizable when either the two divisions expands (the <div id="main"> lists down all the available products that is why it also has an auto height). The problem is that when I use a float property or a "display: inline" property in the main and manufacturers divs it overrides the bottom div causing it not to expand.
here's my css code:
#bottom{
padding: 1.5em;
margin: auto;
margin-top: 3.7em;
margin-bottom: 5em;
background-color: white;
width: 67em;
height: auto;
}
#manufacturers{
padding: 1em;
width: 13em;
height: auto;
border: 1px solid #CFCFCF;
font-size: 17px;
float: left;
}
#main{
float: right;
padding: 0.5em;
width: 47em;
height: 10em;
background: blue;
position: relative;
display: inline;
}
In your case element with ID "bottom" collapsed because of elements inside have floats (left or right). You should use clearfix class with #bottom:
.clearfix: before,
.clearfix: after {
display: table;
content: " "
}
.clearfix: after {
clear: both
}
Answer to question about "clearfix"
#main{
display: inline-block;
}
you could try this:
#bottom{
width: 100%;
}
#manufacturers{
width: 50%;
}
#main{
width: 50%;
}
Add above css properties in your existing CSS stylesheet. Apart from it:
Expanding Downward to fit the content is the expected behavior. If you have specified floats somewhere in your style you may need to clear them.
<div style="clear:both"></div>
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I am having an issue with positioning text inside a div. I want the image on the right top corner (which I was able to do) and the text kind of center the bottom text in the box.
This is an example of what I want to do: http://jsfiddle.net/Lucky500/Nq769/
I created a div .bottom_box and added:
.bottom_box {
position: relative;
bottom: -50px;
left: 50px;
}
Is there an easier or more correct way to do this?
Alright -
Added text-align:center to your and elements.
Set your outer_box position to relative.
Set the img value to absolute and positioned with 0.25 em top and right instead of margin.
http://jsfiddle.net/mr_mayers/Nq769/2/
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: .5em;
Position: relative;
}
.bottom_box {
position: relative;
bottom: -50px;
}
p {
color: blue;
text-align: center;
}
img {
position: absolute;
padding: 3px;
top: 0.25em;
right: 0.25em;
}
h1 {
text-align: center;
color: red;
}
You can achieve your layout as follows:
For this HTML:
<div class="outer_box">
<img src="http://placehold.it/100x50">
<div class="bottom_box">
<h1>$25 OFF</h1>
<p>$25 off your first cleaning!</p>
</div>
</div>
Try the following CSS:
.outer_box {
border: solid #6ac5ac 3px;
display: inline-block;
width: 250px;
height: 200px;
margin: 0.5em;
}
.bottom_box {
clear: both;
border: 1px dotted gray; /* for demo only, optional */
}
img {
float: right;
padding: 3px;
margin: 0 0 1em 1em;
}
p {
color: blue;
margin-left: 50px;
}
h1 {
color: red;
margin-left: 50px;
}
Since your image is floated, simply clear the .bottom-box.
Use margin-left on the child elements to get any white space.
See sample: http://jsfiddle.net/audetwebdesign/3SjRG/
You can use text-align: center if you are centering the p and h1 content, but I was not sure if you wanted ragged left or ragged right alignment on the text block;
You'd be better off using text-align:center and position: absolute
See example
There are some solutions.
An other way is to make the box relative and positioning the text and image inside absolute.
I would create a container div with a border for your box, then set the inner divs (one with your image and one with your text) to position absolute. then you can use top:0; right:0; for the picture on the right corner. then bottom:xx; and left:yy; for positioning the text div.
This is just a different method than you used. If it works, doesn't break in any situation, and is simple, then it's correct. Many ways to skin a cat in programming.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO