I have the following code on the page www.7hermanosmx.com/menu.php - everything is working correctly except the yellow boxes (class menuholder) should be floating left against each other three per row. They steadfastly refuse to do this! I know I have done something wrong, and I know I am going to look silly, but can anybody please help me spot my error?
I have the css...
.menutop {
font-size: 18px;
color: #FFF;
background-color: #099;
clear: both;
height: 32px;
padding-left: 15px;
padding-top: 5px;
}
.menuholder {
background-color: #FFC;
width: 250px;
height:auto;
float:left;
font-size:14px;
}
.menutext {
font-style: italic;
color: #666;
}
and I have the html (delivering database driven content)
<div data-binding-id="repeat1" data-binding-repeat="{{FULL_MENU.data.groupBy( "TYPE" )}}" style="width:100%">
<div class="menutop">{{$name}}</div>
<div class="menuholder"> <div style="padding:8px">
<div data-binding-id="repeat2" data-binding-repeat="{{$value}}">
<strong>{{NAME}}</strong>
<font style="font-style: italic; color: #004000;">({{COST.currency( "$", ".", ",", 2 )}})</font><div data-binding-html="{{DESCRIPTION}}" class="menutext"></div>
<br />
</div></div>
</div>
</div>
JS FIDDLE
CSS
.fl {
display: table-cell;
width: 276px;
float: left;
margin: 5px;
}
Please follow this
JS FIDDLE link for demo. Thanks
Related
I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.
Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
This question already has answers here:
How to arrange many <div> elements side by side with no wrap [duplicate]
(3 answers)
Closed 8 years ago.
Here is my code:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
CSS looks like this:
#box1 {
float: left;
height: 125px;
margin-top: 30px;
margin-bottom: 30px;
clear: none;
width: 125px;
border-top-left-radius: 95px;
border-top-right-radius: 95px;
border-bottom-right-radius: 95px;
border-bottom-left-radius: 95px;
background-color: rgb(232, 68, 58);
position:relative;
overflow:visible;
}
#text1 {
float: left;
font-size: 1em;
color: rgb(255, 255, 255);
width: 28%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
word-wrap: break-word;
margin-left: 69.6%;
margin-top: 53px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
overflow:auto;
}
#text3 {
float: left;
font-size: 1em;
color: rgb(0, 0, 0);
width: 72%;
height: auto;
text-align: right;
font-weight: 400;
line-height: 1em;
margin-left: 125px;
margin-top: 0px;
clear: none;
min-height: 0px;
min-width: 0.5em;
font-family: snippet;
position:relative;
overflow:visible;
}
Now this is not giving me the required result.
The Text-3 should actually appear next to the text-1. But somehow its wrapping down to the next tine.
btw. I am using this inside a Zurb Foundation code. Writing my custom class on top of the existing CSS styles.
EDIT:
Although I solved the problem, just for the clarity of some of you, Text-1 is inside the circle and is right aligned to the edge of the circle. Text-3 is outside the circle and is left aligned to the edge of the circle. Such that the two text, are next to each other, one inside the circle and one outside.
Is there a reason you are adding the margin-left to each div? Cleaned it up a little and it seems to work.
#text1 {
min-width: 0.5em;
width: 28%;
color: white;
}
#text3 {
min-width: 0.5em;
width: 72%;
color: black;
}
.inner-box {
float: left;
margin-top: 53px;
text-align: right;
font-weight: 400;
font-size: 1em;
line-height: 1em;
}
http://jsfiddle.net/ferne97/8FzN5/1/
Also think about creating a re-usable class for all that code that is getting repeated in each inner div.
http://jsfiddle.net/tahdhaze09/7FM82/
CSS:
#box1
{
width:980px;
float:left;
}
#text1{
width:450px;
float:left;
background-color:#45e64c;
}
#text3{
width:400px;
float:left;
background-color:#edc321;
}
HTML:
<div class="large-6 columns">
<div id='box1'>
<div id='text1'>
Name
</div>
<div id='text3'>
LastName
</div>
</div>
</div>
Text boxes, side by side. I left out the other CSS for simplicity.
Here's how to do this with Foundation's native architecture:
<div class="large-6 columns">
<p>Some content</p>
</div>
<div class="large-6 columns">
<p>Some more content</p>
</div>
This will give you two containers, side-by-side, spanning the full width of 960px.
I tried out the code on W3C school's
try it editor.
Your question does not really describe what you were expecting to see. Of course the "Name" and "Last name" beside each other. But within the circle? to left of it ?
I would recommend trying out the css on W3C's try it editor and playing around with the margins (margin-top, margin-left) and widths. Suggest starting by removing the margins and widths completely from the above css and then adding them one at a time. Of course check the try it editor for the changes due to each of the margin / width additions.
I'm attempting to center the logo within my header. I tried the display:block and margin:auto within my #site-title class, but it isn't working.
The link to the code is: http://pastebin.com/iNvhTSBL
And the CSS is: http://pastebin.com/f5mPTjuU
I'm not sure what to do...maybe I'm not doing the CSS correctly?
Any help would be appreciated! The CSS was from a wordpress theme, just letting you all know.
Thank you!
Next time, post only the relevant code bits in your question. That makes it MUCH more likely people will bother to answer.
If this is the code you are referring to:
<div id="header">
<div id="site-title">
<img src="http://i.imgur.com/ysxPP.jpg">
</div>
<!-- other bits stripped for brevity -->
<div class="clear"></div>
</div>
and the css is this:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
float: left;
width: 100%;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
display:block;
margin: auto;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
}
Then you need to revise the css as follows:
1. remove the float: left from the site-title. Unecessary.
2. Note that your padding-right of 40px is going to cause problems with your width: 100%
3. Add text-align: center; to the site-title.
4. Add margin: 0 auto; to your site-title a
The following code will do what you want:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
width: auto;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
text-align: center;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
margin: 0 auto;
}
Add this to #site-title
text-align: center;
This should work:
#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>
I want to align the text in my div ('what' and 'where') but now that I have the text a the bottom it has pushed the divs (search-field1 and searchfield2) further down the page!
How can I have it so the text doesnt affect this? Is it something to do with the cellpadding/spacing?
Sorry im not the best at CSS I'm teaching myself it.
HTML:
<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>
<center>
<div class="search-field1">
</div>
<div class="search-field2">
</div>
</center>
CSS:
.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
}
.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
}
.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}
.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}
Thanks!
James
James is this what you are looking for? http://jsfiddle.net/jkeyes/WFPK2/
Set the line-height for your containers (in this case .what and .where to be the same as the height:
line-height: 35px;
sounds like you need float:left on your center tags
Html:
<div class="center">
<div class="what">what?</div>
<div class="where">where?</div>
</div>
<div class="center">
<div class="search-field1"></div>
<div class="search-field2"></div>
</div>
CSS:
If you use float:left on the enclosing div's it will allow the two center div's to float side by side.
.center {
float:left;
}
Another option would be to set your line height to zero on the hidden div like so:
line-height: 0px;
Then add padding to the surrounding divs. Like so:
padding-top: 10px;
Hope that helps someone.