I have the following block of CSS/HTML:
<html>
<head>
<title>{CODE} Pink</title>
<style>
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: right;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
</style>
</head>
<body>
<div class="leftlogo logo">{CODE}</div>
<div class="rightlogo logo">PINK</div>
</body>
</html>
What it's currently doing is this:
What I'd like it to do is this:
I know I can do this with positions, but what's the best way to do this so the two will stay next to each other in a variety of scenarios?
Change your code for the .rightlogo class to reflect this:
.rightLogo {
float: left;
}
instead of what it is currently:
.rightLogo {
float: right;
}
Note: Also, be mindful of your capitalization of the classes. I noticed that in your CSS, you use .leftLogo but in your HTML, you use .leftlogo. I'm not sure how deep the browser requirements go for being that strict, but I wouldn't put it past IE to mess something up.
The result:
.leftLogo {
float: left;
border: black solid;
background-color: black;
color: white;
font-family: Courier, Courier New;
}
.rightLogo {
float: left;
border: black dashed;
background: pink;
color: black;
}
.logo
{
height: 50px;
line-height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
font-size: 3em;
}
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
You can easily do this by adding float: left; to your .logo class and removing the float property inside .leftLogo & .rightLogo
I think the best approach for this question is to set the two logos(divs) inside a container, to have an absolute position so they overlap and then the one you want in the right give it a right of 100%.
html code
<div class="container">
<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>
</div>
css Code
.container{
position: absolute;
}
.rightLogo {
right: 100%;
}
I have only put the code that needs to be add to what you currently have.Good Luck
Hope this answer your Question T04435...
PS:The divs in the original post have miss spell in the class names the l should be Capital L leftlogo ---> leftLogo and same for right
You can use float:left for right div, and resize width with media queries for resolution where second div go to bottom.
Related
I am trying to improve my css(and html) skills by trying to re-create the homepage of reddit.
The problems I have are the sidebars simply won't stay where they are supposed to be when resizing the browser window, they go up and the width is also changing.
The way it is on my end: https://imgur.com/a/SrfyP (Look at the right side things)
The way it should be: https://imgur.com/a/iBEX3 ( They always stay on the same width and height)
HTML for just the blue bars on the right side which say "Submit a new link"(in the imgur link). I assume if I can get one of them to work I can get all the other elements to work properly too.
<div class="container">
<div class="div1">
Submit a new link
</div>
<div class="div2">
Submit a new text post
</div>
</div>
CSS:
html, body{
margin: 0;
padding: 0;
width: 100%;
}
.container{
display: block;
margin-top: 8%;
margin-left: 87%;
width: 8%;
}
.div1, .div2 {
display: inline-block;
margin-top: 5%;
background: rgb(212, 229, 245);
height: 100%;
padding: 7px;
width: 199%;
text-align: center;
margin-left: -53%;
border-radius: 10px;
border: 1px solid #c4dbf1;
font-size: 150%;
font-weight: bold;
letter-spacing: -1px;
font: normal medium verdana,arial,helvetica,sans-serif;
}
.div1 a, .div2 a{
font-weight: bold;
text-decoration: none;
}
I tried so many possibilities, messing with position, display, float, width, margins. This question has been answered a million times but I couldn't find something that helps me.
Thank you for your time.
I found site template.
body {
font: 10pt Arial, Helvetica, sans-serif;
background: #54463d;
margin: 0;
}
h2 {
font-size: 1.1em;
color: #752641;
margin-bottom: 0;
}
#container {
width: 500px;
margin: 0 auto;
background: #f0f0f0;
}
#header {
background: #8fa09b;
font-size: 24pt;
font-weight: bold;
color: #edeed5;
padding: 5px;
}
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
}
#content p {
margin-top: 0.3em
}
#sidebar {
float: left;
width: 120px;
padding: 10px;
}
#footer {
background: #8fa09b;
color: #fff;
padding: 5px;
}
.clear {
clear: both;
}
It works ok if content height more than menu height:
http://jsfiddle.net/R6MYH/1/
But, in another case, the site is not displayed correctly:
http://jsfiddle.net/a5SFM/
Make slight change in your design as mentioned below :
Put divs with id content and sidebar inside one div with float:left
Remove float:left from css #content and #sidebar
Add display:table-cell in css #content and #sidebar
Live Demo This will work in all cases.
Your inner html will look like :
<div style="float:left">
<div id="content">
<h2>Title</h2>
<p>There is only one sentence.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum</p>
<p>Dolor sit amet</p>
<p>There is at text. Not really!</p>
<p>Link 4</p>
</div>
</div>
Advantages:
The main advantage of using display:table-cell is you don't have to set min-height. It will work even your side bar contains height of 1px.
More user friendly
Compatible in all the browsers (ie > 7)
You don't have to do any extra work like javascript/jquery.
create a div inside #container and put #content and #sidebar inside it.
and then replace float: left in css of both #content and #sidebar with display: table-cell
like this: http://jsfiddle.net/aneelkkhatri/a5SFM/6/
no use of min-height
A more general solution, would be to implement this using JavaScript (jquery)
Add this script to your document
$(document).ready(function () {
$("#content").height($(window).height() - $("#header").height() - $("#footer").height() - 40);
});
This will make the content height as same as the browser's window height in all cases
Don't forget to add this to inside your tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Check it out here: http://jsfiddle.net/basharmadi/Mqy7y/
Try adding this to #content:
min-height:300px;
This will "extend" down the content div no matter what.
Try to put a min-height to your content div:
min-height: 200px;
Here:
#content {
float: left;
width: 329px;
padding: 10px;
border-right: 1px dashed #183533;
background: #fff;
min-height: 200px;
}
jsfiddle
I made a CSS Navbar, but inbetween each "navbar-item", there is little space. I don't want there to be anyspace at all! Is there a way to make this happen without changing the margin-left for every navbar-item?
<!doctype html>
<html>
<head>
<title>Home - UnhandyFir9</title>
<style>
#wrapper {
box-shadow: 0px 0px 20px 10px black;
left: 0px;
top: 0px;
margin: auto;
margin-top: 30px;
width: 800px;
background-color: rgb(200, 200, 200);
font-family: sans-serif;
}
#top-notification {
display: inline-block;
width: 100%;
height: 20px;
background-color: lightblue;
text-align: center;
}
#navbar-core {
width: 100%;
height: 30px;
background-color: lightgreen;
}
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
</div>
</body>
</html>
The problem is in display:inline-block - it reduces the elements to inline blocks, meaning they behave like all other inline content in HTML. Since there's whitespace between the anchor elements, which as always collapses to a single whitespace, what you see is an actual 'space' in between in the current font size just like between words in a sentence. You can fix this by applying font-size:0 on the container but that's messy since you'd have to reset it for the children. Recommended method is to just use float:left instead and manually set the parent's size correctly, and set the items to height:100%.
Using multiple elements with the same ID is wrong but not causing this issue - should still be fixed though.
As I mentioned in my comment, IDs must be unique, so use classes instead. That being said, your links are inline elements and are sensitive to white space, so either float them left or remove the white space between the elements in the code.
Ex:
.navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
float:left;
}
jsFiddle example
White space removed jsFiddle example
Try this;
.navbar-item {
display:block;
float:left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
First,
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
Change this to a class instead of an id. Id's are unique and can only be used once on a page but a class can be used over and over again.
I am pretty sure the space is from this but I will make a fiddle to test,
display: inline-block;
You could change display: inline-block; to float: left; and have it without the space.
JSFIDDLE
Use float: left; instead of display: inline-block; by using inline-block will have 4px margin by default but using float: left; by default do not have the space. And use classes for every a element no id, id are unique and shouldn't be repeated.
.navbar-item {
/*display: inline-block;*/
float: left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
If you still want to use inline-block instead of float: left; you should use margin-left: -4px;
To solve your problem quickly, you can wrap your links with span and give it a darker background:
<div id="navbar-core">
<span class="navbar-inner-wrapper">
Home
Lessons
About Us
Donate
</span>
</div>
Then add this to your CSS:
.navbar-inner-wrapper {
background-color: green;
}
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.
I have the following problem.
I have done the following:
In my css file, I have declared both for body and for a div tag enclosed in body, height: 100%; (the div tag is technically a <asp:panel> tag, but get's rendered as a div tag.
This works fine, and the div container scale to fill the browser from top to bottom, and does not give any scrollbar, just as it is intended to.
However, on one of the sub-pages, from the Page_Load method I add some controls to the panel/div, and those controls are enough to fill more than the height of the screen, and therefore a vertical scrollbar is given as it should. However, when I start scrolling, the part of the content that was originally below the height of the screen do not get any background. So the background is still constrained to the max height of the screen even if it's contents are exceeding that height.
I assume that the height:100% causes the problem here, but I have not found a replacement that works as it should in this case. I tried height:auto; causing the background to be removed in it's entirety.
The question might be basic, but I do not do much web programming these days, so please bear with me :)
EDIT
As additional information, I should mention that the content is actually added inside a div inside the original div if that matters.
EDIT 2
Some of the relevant html and css:
<html>
<title></title>
<body>
<form>
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
</div>
</form>
</body>
</html>
And here is the extracted css parts:
*
{
margin: 0;
padding: 0;
}
html, body
{
background-color: #6CC66C;
height: 100%;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
height: 100%;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
p
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
a
{
font-family: Arial, Sans-Serif;
font-size: 16px;
text-decoration: none;
}
.MainContainer
{
background: #6CC66C url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
height: 100%;
margin: auto;
background-color: #F7F7F7;
}
div.MainMenu
{
position:relative;
float: right;
margin-right: 38px;
margin-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
I have a solution for this and it's rather simple. :)
.MainContainer {
...
display: table;
}
(Remove the height: 100% from elsewhere too, it's redundant.)
Some spec info on that: http://www.w3.org/TR/CSS2/tables.html also here: w3schools.com/css/pr_class_display.asp (Apparently I can only post two links a new user right now)
Regarding the use of Height: 100%, doing that will only make the elements height equal to the height of it's parent element - in this case the document window, not the contents of it.
Some spec info here: http://www.w3.org/TR/CSS21/syndata.html#percentage-units
Regards.
Try overflow tag in Css file
overflow:scroll;
overflow:auto;
I think what you need is something like this:
Style should be
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Arial, Sans-Serif;
font-size: 16px;
}
form
{
background: #6CC66C url( 'images/ShadowBackground.jpg' ) repeat-y top center;
}
body h1
{
display:none;
}
.DivHeader
{
font-family: Arial, Sans-Serif;
font-size: 22px;
color: #D04444;
padding-top:20px;
padding-bottom:10px;
}
a
{
text-decoration: none;
}
.MainContainer
{
background: #F7F7F7 url( 'images/MainBackground.jpg' ) no-repeat top center;
width: 1040px;
margin: 0 auto;
min-height: 100%;
}
div.MainMenu
{
float: right;
margin-right: 38px;
padding-top: 103px;
width: 495px;
}
.MainMenu a:link img, a:visited img { border: 0px; }
.ContentContainer
{
float: left;
margin-top:90px;
margin-left:80px;
width:550px;
}
And you need an element to clear the floated divs in the MainContainer
<div class="MainContainer">
<h1>My header</h1>
<div class="MainMenu">
...
</div>
<div id="PageContents_BlogPostPanel" class="ContentContainer">
...(These are the contents that extend beyond the bottom of the page)!!
</div>
<div style="clear:both"></div>
</div>