I have 3 divs which I want them to display at the same height left center and right but that isnt happening right now.
Proof of concept:
https://dl.dropboxusercontent.com/u/51736887/Untitled.png (must have 10 rep to post images ughh)
The problem is that the sidebars and the main content are the one bellow the other and stuck to the side not just under the navbar like I want them.
Image of what happens: https://dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png
This is my current code(includes only 1 of the 2 sidebars):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h3 align="center"><img src="afterlogo.png" alt="" height="358" width="339"></h3>
<div id="nav">
<ul>
<li>Home</li>
<li>Forums</li>
<li>Donations</li>
<li>Vote</li>
</ul>
</div>
<div class="content">
<p><b> test </b> 0000-00-00 00:00:00<br><b> test 2 </b> 0000-00-00 00:00:00<br>test3 0000-00-00 00:00:00<br>test4 0000-00-00 00:00:00<br>test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br />test <br /> </p>
</div>
<div class="sidebar"> test </div>
<div class="footer">
<br />
Test footer
<br />
</div>
</html>
and heres the css:
body {
background-image:url('../bg.png');
background-attachment: fixed;
background-position: bottom;
}
#nav a:link{
text-decoration: none;
color: #000000;
font-size: 2em;
}
#nav a:visited {
color:#000000;
}
#nav a:hover {
color: #00FF00;
}
#nav {
border-radius: 15px;
background-size: cover;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
word-spacing: 2em;
}
.nav {
text-decoration: none;
}
li {
display: inline;
}
.content {
border-radius: 15px;
background-size: cover;
/*background-image:url('../content.png');*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 500px;
background-repeat: no-repeat;
}
.sidebar {
border-radius: 15px;
/*background-size: cover;*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: left;
overflow: hidden;
margin-left: 120px;
margin-right: auto;
width: 220px;
float: left;
}
.footer {
clear:both;
border-radius: 500px;
text-align: center;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
}
I believe you are looking to achieve equal height columns - here's an excellent writeup by Chris Coiyer detailing the different techniques you can use.
p/s: It would be good if you can include the actual HTML output of the final layout (not in separate PHP files) ;)
Edit: After having a look at your code, it seems that you are positioning the sidebar absolutely. Is there any reason why you are doing so? You could have easily floated the sidebar and the content, so they will sit side by side.
Update: First of all, you should avoid using deprecated HTML features, such as the align="center" property. You should delegate all attributes that dictate layout to your CSS file instead.
You cannot combine both float and position: absolute on the same element. They are conflicting properties, and both will take your element out of the normal document flow. What I would suggest is wrapping your content and sidebar in a common parent element, say, <main>, <section> or <div>, and them floating them.
Here's the revised markup:
<section class="main">
<div class="content">
<p>Content</p>
</div>
<div class="sidebar">test</div>
</section>
And CSS:
.main {
margin: 0 6em;
/* or you can set width using "width: ..." */
overflow: hidden; /* Prevent parent from collapsing */
}
.content, .sidebar {
background-color: rgba(76, 92, 70, 0.7);
border-radius: 15px;
float: left;
}
.content {
}
.sidebar {
width: 250px;
}
http://jsfiddle.net/2X7pv/
Related
hello there I'm facing now a problem with controlling an element from inside of a different element .
for example if I want to control the appearance of an element inside of footer by hovering over another element in header .
i hope you have the answer and thanks in advance
One way to do this is, for example, if you have a li with a link inside and you want to change the color of the link when the li is hovered on, you could do this:
ul li:hover a {
color: green;
}
/* only for presentation */
ul li {
width: 100px;
height: 50px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<ul>
<li>
Link
</li>
</ul>
if you wanted to affect totally random elements as you said, you can do this:
/* ----- This is all extra styling ----- */
body {
background-color: #121212;
}
.header {
position: fixed;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
.footer {
position: absolute;
top: 90%;
background-color: rgb(31, 33, 34);
width: 100%;
color: white;
font-family: arial;
text-align: center;
}
/* ----- This is all extra styling ----- */
.header:hover + .footer {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta tags and what not -->
</head>
<body>
<div class="header">
<!--Header stuff here-->
<h2>My Website</h2>
</div>
<!--In this case the footer and header must be exactly next to eachother for the + to work-->
<div class="footer">
<h4>Hover on the header to change my color</h4>
</div>
<!--This could be whatever you want the page content to be-->
<main>
</main>
</body>
</html>
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
I am trying to place my "tweet" button next my "generate quote" button, but for some reason the css doesn't work. I tried using top: 50%, margin-top: 50%, placed it in another div under the "quote" div, targeted it with #, but it still stays in the top left corner. What can be the reason?
https://codepen.io/s4ek1389/pen/zZGNWw?editors=1100
HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<div class="main">
<div id="quote">
<h1>There is nothing either good or bad, but thinking makes it so.</h1>
<h4>William Shakespeare</h4>
</div>
<div class="containter">
<div class="row">
<button type="button", class="btn btn-primary", id="gen"> Generate Quote!
</button>
Tweet
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
CSS
.main {
background-image:url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size:cover;
min-height: 640px;
margin: 0 auto;
position:relative;
width:100%;
max-width:1680px;
}
#quote {
text-align:center;
width:70%;
}
h1 {
position: absolute;
top: 30%;
font-size:5vw;
background-color:rgba(173, 29, 125, 0.5);
color:white;
font-family: "Comfortaa", cursive;
text-align:center;
display:block;
}
h4 {
top:60%;
font-size:3vw;
background-color:rgba(173, 29, 125, 0.5);
color:white;
font-family: "Comfortaa", cursive;
position:absolute;
display:inline-block;
}
#gen {
top:80%;
position: absolute;
left:42%;
display:inline;
}
#tw {
top:50%;
position:absolute;
margin-top:50%;
}
Instead of absolutely positioning each individual element, you can put all of this text/button content in a single element that you absolutely position, then relatively position the contents of that element relative to one another. It will make things a lot easier.
The main issue with your twitter button is that the code you put in your HTML is just a placeholder that is replaced with an iframe for the twitter button, so you're styling the wrong element. You don't want to style #tw, you want to style #twitter-widget-0, which is the ID of the rendered iframe that the twitter button creates. But if you put that code in an element like I mentioned above, you shouldn't need to style that button.
.main {
background-image: url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size: cover;
min-height: 640px;
margin: 0 auto;
position: relative;
width: 100%;
max-width: 1680px;
}
#quote {
text-align: center;
position: absolute;
top: 30%;
left: 0;
right: 0;
}
h1 {
font-size: 5vw;
background-color: rgba(173, 29, 125, 0.5);
color: white;
font-family: "Comfortaa", cursive;
}
h4 {
font-size: 3vw;
background-color: rgba(173, 29, 125, 0.5);
color: white;
font-family: "Comfortaa", cursive;
display: inline-block;
}
#gen {
margin-right: 1em;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<div class="main">
<div id="quote">
<h1>There is nothing either good or bad, but thinking makes it so.</h1>
<h4>William Shakespeare</h4>
<div class="buttons">
<button type="button" class="btn btn-primary" id="gen"> Generate Quote!</button>
Tweet
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).