I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
Related
I have been trying to build a website having a 3 column layout. All of the body is given a margin:0 auto to keep it at the centre, and has a minimum width of 1218px.
Now, what I want to do is reposition the right column in such a way the it goes below the left column without affecting the centre column. A live example would be twitter home page, where at the left I can see my profile and trends, the centre column features the tweets and the right column shows suggestions on a 1366x768 screen, now if I change the screen size to 1024x768, the column of suggestions at right goes down below the left column but the central timeline is unaffected.
The definition would be:
<div class="containter" style="margin:0px auto;">
<div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
<div class="center-col" style="width:590px; float:right;"> Center body </div>
<div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>
Now note that the central column has a right float, copied from twitter.
I can't use media queries for that since the website is going to deal with a lot of old browsers and also I would like to avoid JavaScript if possible.
Any help?
You can't do that with "min-width" of the main container. You must use "max-width" since you want to make sure something happens when the screen width gets more narrow. And the main column (in the center) has to be left-floated, not right. Here's a possible solution. However the whole questions seems weird to me since you want to make a responsive layout in an old browser that doesn't support responsive CSS.
<style>
.container {
max-width: 1218px;
}
.leftColumn {
float: left;
width: 300px;
height: 500px;
background-color: brown;
}
.mainColumn {
float: left;
width: 700px;
height: 500px;
background-color: darkgreen;
}
.suggestions {
float: left;
width: 218px;
height: 500px;
background-color: darkorange;
}
.cleaner {
clear: both;
}
</style>
<div class="container">
<div class="leftColumn">
LEFT
</div>
<div class="mainColumn">
MAIN
</div>
<div class="suggestions">
SUGGESTIONS
</div>
<div class="cleaner"></div>
</div>
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
I'm trying to make a layout where I have a Div that gets added its content in a dynamic way. I want this "parent" div to have a fixed height and when content its added the div grows horizontally as needed.
This is the test HTML I made to isolate the problem.
<html>
<head>
<link rel="stylesheet" href="styletest.css" />
</head>
<body>
<div style="width:700px;overflow:auto">
<div class="anio">
<div class = "semestre">
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
<div class="floater"></div>
</div>
</div>
</div>
</body>
</html>
Here i have 7 class=floater divs that go into the class=semestre container div which is supposed to grow horizontally as I add more class=floater divs. all of this goes into a fixed width div with overflow-x:auto.
after some fighting with the css i managed the following:
div.floater {
margin: 4px;
width: 110px;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
div.semestre{
white-space: nowrap; /* this avoid the floater overflowing under the parent div*/
margin-top: 5px;
margin: 2px;
height: 90px;
border: 1px solid #ccc;
min-width:98%;
}
div.anio{
margin : 2px;
border: 1px solid #ccc;
min-width:98%;
}
So this worked..kind of.. the class=floater divs go horizontal and cause the activation of the overflow-x on the outermost div, but the container divs that contain the class=floater div don't grow as i think the should (this can be seen by the borders not growing). After googling I found some proposed solutions like adding width:auto on top of the min-width: css property or floating them, but none worked. This is a minor issue since the borders are just for formatting.
The mayor problem I'm having is when I try to add content to the class=floater divs they just go CRAZY and won't stay where they should( when they had no content). i tried reverting the white-space:nowrap by adding white-space:normal to the floater class but that didn't work. After that I just went berserk and started trying random stuff and managed to fix my first problem but the I forgot what I did and went back to step 1 D:.
To be honest I'm very new to html/css and I'm learning by doing. So if this question has been already asked/answered believe me that I searched for it. Also excuse my English, doing my best.
Thank you for your time.
edit:
By request, the fiddle :D http://jsfiddle.net/UBYKy/1/
there you can see both of my problems.
edit 2: i believe i have found a solution to both problems. For the first one I solved it by adding display: inline-block to the parent divs and for the 2nd problem I added vertical-lign:top to the floater class css(as afshin suggested) and it works just fine. I hope this helps anyone having the same problem.
I think you should use this
div.floater {
vertical-align:top;
margin: 4px;
min-width:110px;
width: auto;
height: 82px;
border: 1px solid #ccc;
display: inline-block; /*this to make the floaters go horizontal*/
}
DEMO
I am having difficulty getting 3 images of equal size to float properly. I have set the right and left margins on the center floated image to auto and it still doesn't work. All the panels in my layout are floated left which I revised from tutorials and works ok as they're butted up against each other, but trying to float images when there is more space than necessary, doesn't display as I want: with equal spacing between images Left & Center and Center & Right. My content panel is 534px wide with 10px padding taking up 554px plus a 1px border plus a 5px margin around the outside. The images are all 160px wide and I gave the FloatLeft class a 10px right margin, the FloatRight class a 10px left margin and the FloatCenter an auto margin for both left and right. Both FloatLeft and FloatRight are used on several pages, surrounded by text, which is fine.
Ok, update - I now realise float: center is not possible, DUH!, which is the problem - I'm just a few months into CSS etc.!
Are there any alternatives (other than a table). I could align them all left and make the margin: right attribute 27px (160px x 3 images + 27 + 27 = 534px) but then I'd need to create a new FloatLeft class specifically for these images. Any suggestions on the best method of aligning the images would be much appreciated.
Gary.
The relevant HTML & CSS:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar Power Today</title>
<link rel="stylesheet" type="text/css" href="solarpower.css">
</head>
<body>
<div id="wrapper">
...........
<!-- header panel, then horizontal navigation panel then left panel then ... -->
..........
<div id="content">
<!-- main content -->
<h1 id="contentheader">Introduction to Solar Power</h1>
<p>
<img class="FloatLeft" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining
on roof solar panels" width="160" height="160">
<img class="FloatCenter" src="images/smallwindturbine160px.jpg" alt="Small wind
turbine spinning" width="160" height="160">
<img class="FloatRight" src="images/waveturbine160px.jpg" alt="Wave turbines in
motion" width="160" height="160">
</p>
CSS:
* {padding:0; margin:0; border:0;}
.FloatLeft {
float: left;
margin: 0 10px 10px 0;
}
.FloatRight {
float: right;
margin: 0 0 10px 10px;
}
.FloatCenter {
float: center;
margin: 0 auto 10px auto;
}
#content {
width: 534px;
min-height: 400px;
margin: 0px 5px 5px 0px;
padding: 10px;
float: left;
border: 1px solid black;
display: inline;
}
I recently tackled the issue of equally spacing and arbitrary number of elements across an unknown width using text-align: justify;. The full discussion can be found at “text-align: justify;” inline-block elements properly?, with good discussion on the pros/cons and alternate solutions.
Here's a fiddle showing how to arrange three images using the technique discussed. It should work in all major browsers, although feel free to kick the tires and get back to me with issues.
You are using float:center; in .FloatCenter class, that is invalid, there is no center value for float, put float:none; and chnage your margin length;
.FloatCenter {
float: none;
margin: 0 auto 10px 15px;
}
I am trying, as far as possible to keep things simple. I would prefer to know how the code I'm applying works rather than using a solution without fully understanding it. I wasn't aware that text-align could help to align images so I had a play around with that. Until I fully understand the above text-align: justify solution which has lost me a bit, I have put the each of the 3 images in a new div container class .ImageBox:
.ImageBox {
width: 178px;
margin-bottom: 10px;
float: left;
}
I then put each image inside a element and used an inline style on the element to align the image position:
<div class="ImageBox">
<p style="text-align: left"><img src="images/sunonsolarpanelroof160px.jpg" alt="Sun
shining on roof solar panels" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: center"><img src="images/smallwindturbine160px.jpg" alt="Small
wind turbine spinning" width="160" height="160"></p>
</div>
<div class="ImageBox">
<p style="text-align: right"><img src="images/waveturbine160px.jpg" alt="Wave turbines
in motion" width="160" height="160"></p>
</div>
I know inline styles are frowned upon but it uses less code than creating a separate div container for each image and setting the text-align property in each div container to either left, center or right in the stylesheet. I've also just realised that simply specifying width and or height properties and even a border (for testing purposes) will not show a div container in the browser. The div container class appears to need either a float or clear property for the box to come to life. I need to learn more css.
Here's one way you can achieve what you're looking for:
http://jsfiddle.net/CsjYN/1/
THE HTML:
<div id="content">
<h1 id="contentheader">Introduction to Solar Power</h1>
<div class="images">
<img class="img-left" src="images/sunonsolarpanelroof160px.jpg" alt="Sun shining on roof solar panels" />
<img class="img-center" src="images/smallwindturbine160px.jpg" alt="Small wind turbine spinning" />
<img class="img-right" src="images/waveturbine160px.jpg" alt="Wave turbines in motion" />
</div>
</div>
THE CSS:
#content {
width: 534px; /* full width 556px */
padding: 10px;
border: 1px solid #000;
}
#content h1 {
margin-bottom:20px;
}
#content .images {
overflow:auto;
}
#content .images img {
width:160px;
height:60px;
float:left;
}
#content .images img.img-left,
#content .images img.img-center {
margin-right:27px;
}
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!