Push text following image to top of div - css

I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice)
I want to include a menu in the black bar, so I added a UL menu as the next child element.
However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo.
I want to push the menu to the top, above the black area
I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail.
Anyone got a solution?
Thanks!!!
HTML
<div id="black-bar">
<img src="..."></img>
<ul>
<li>Programs & Projects</li>
<li>Recipes</li>
</ul>
</div>
CSS (This is only the lat of many combos I've tried)
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul{
line-height: 119px;
display: inline;
vertical-align: top;
}
#black-bar ul li{
display: inline;
}

JSfiddle
CSS
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline;
}
#black-bar ul li a {
vertical-align: top;
line-height: 40px;
color: white;
text-decoration: none;
}

You can take the line-height property from the black header.
Then you can display li as inline-block and apply padding as requited.
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
/*line-height: 119px;*/
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline-block;
padding:10px 15px 0 0;
}
see fiddle: http://jsfiddle.net/Jywd3/

Related

How to make fixed horizontal menu as image below on top of page

I need to make a horizontal menu on top of the page like the image bellow :
I tried to make it in fiddle, but the problem is it does not display
.ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
/* Set the navbar to fixed position */
top: 0;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
<ul>
<li>الرئيسيه
</li>
<li>نبذه عن
</li>
<li>اتصل بنا
</li>
</ul>
So that how to make fixed horizontal menu on top of page as image above ?
Here is the link to the fiddle
ul isn't a class. it's element. remove dot here: .ul {..., thus it should work.
to make top red line along menu you cal jusr set border-top: 4px solid red;
ul {
border-top: 4px solid red;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}
<ul>
<li>الرئيسيه</li>
<li>نبذه عن</li>
<li>اتصل بنا</li>
</ul>

Text changes line on space

I have a list, which leaves some spaces for indentation purposes and also provides dashed underlying. However the display properties used for this list do no match, causes the text to change line when a space is found. Here is a Fiddle.
The CSS:
.dashed {
display: block;
width: 100%;
height: 90%;
border-bottom: dashed 2px #54687a;
}
li {
display: table-row;
}
li span {
display: table-cell;
padding-right: 1em;
}
I tried to keep only one display property, but that failed. Anyone has a fix for this please?
Let's speak with images!
What happens now - it's the problem:
Desired result:
Remove the dashed class, and add these styles:
li span:after {
content: '';
position: absolute;
display: block;
width: 90%;
margin-left: -12px; /* compensate for padding-left: 12px; */
border-bottom: dashed 2px #54687a;
}
Fiddle
Are you trying to get it so that everything is in one line, like this?
Name: Charis Spiropoulos
If so, try this:
li span {
display: inline-block;
padding-right: 1em;
}
I just updated your fiddle
I added in your CSS
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
display: inline-block; // added or it can be inline
}
You'll likely have better luck with display: block; on the list items and display: inline-block; on the span. table-cell is causing the line to wrap around.
li {
display: display;
padding: 10px 0px; /* modify as desired */
}
li span {
width: 50px; /* Set width as needed so the names line up, even if the span text is different lengths */
display: inline-block;
padding-right: 1em;
}
http://jsfiddle.net/daCrosby/cmfL2643/18/
UPDATED - Final css should be like
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
.dashed {
border-bottom: 2px dashed #54687a;
display: block;
width: 58%;
margin-bottom:10px;
}
li {
display: table-row;
padding-bottom:5px;
}
li span {
display: inline-block;
padding-right: 1em;
width:23%;
}
Check the UPDATED demo - http://jsfiddle.net/cmfL2643/21/

I can't keep the footer fixed to the bottom of screen when zoomed out

i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.
So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.
I have to do this for a school unit, is there a way to do this?
For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.
Here is the site:
http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.
Here is my CSS:
* { padding: 0; margin: 0; font-family: verdana; }
html {
height: 100%;
}
body {
font-size: 13px;
color: #000;
background-color: white;
background-position: center;
background-repeat: repeat-y;
background-image: url('../images/background.jpg');
}
/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}
/* Header div */
#wrapper #header {
height: 200px;
background-color: green;
}
/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}
/* Horizontal list div */
#wrapper #navigation {
height: 25px;
background-color: white;
display: block;
}
/* Horizontal list */
#navigation ul {
padding-top: 5px;
list-style-type: none;
text-align: center;
width: 960px
}
/* Horizontal list items */
#navigation li {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
/* Horizontal list link */
#navigation a {
height: 25px;
width: auto;
display: block;
line-height: 15px;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: black;
padding-left: 8px;
padding-right: 8px;
}
/* Horizontal list hover attribute */
#navigation a:hover {
color: Darkgrey;
}
/* Content div */
#wrapper #content {
display: inline-block;
height: auto;
width: 950px;
background-color: white;
padding-left: 10px;
padding-right: 0px;
}
/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}
/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}
/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}
/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}
/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}
/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}
/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}
/* Side menu div*/
#wrapper #content #menu {
float: right;
padding: 0px;
margin: px;
width: 220px;
height: 1118px;
}
/* Side menu*/
#menu ul {
list-style-type: none;
float: right;
text-align: right;
width: 170px
}
#menu li {
background-image: url('../images/pg_menu_bg.png');
}
/* Side menu link */
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 0px;
}
/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}
/* Footer div */
#wrapper #footer {
height: 40px;
background-color: #82AAF1;
width: 960px;
margin: 0px, auto;
position: relative;
bottom: 0;
}
/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}
.padext {
padding-top:2px
}
Sorry i am still a beginner.
Thank you for you time.
If you HTML is like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
apply the following CSS.
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
The padding-bottom of the #content is set as the height of the footer.
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS

Need to Center my CSS Menu

I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}

How to remove space between ul and wrapping element with border on a mobile device?

I have setup a fiddle: http://jsfiddle.net/BaWC8/2/
You can see that I have a wrapper div containing an ul with li's. The li's have a with of 25% so they get evenly spread across the 'page'. The wrapping div has a border of 1px. Since all li's also have a border of 1px, it looks like they all have a border of 2px (which I want).
Now. This looks all good on a desktop but when you open it on a mobile device (iphone, android) you see a small spacing on the right side of the wrapper between the last li and the wrapper border.
Here is the code (html):
<div class="wrap">
<ul>
<li><span>aaaa</span></li>
<li><span>bbbb</span></li>
<li><span>cccc</span></li>
<li><span>dddd</span></li>
</ul>
</div>
Css:
body{
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
float: left;
width: 100%;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
I do not understand why so I hope someone here can help me out.
Remove the float and width from the .wrap and ul.
The border will on .wrap will collapse, which you can either solve with a clearfix, or by adding overflow:auto.
Here is my working CSS:
body {
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow:auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
A working fiddle, at least on iOS: http://jsfiddle.net/designingsean/BaWC8/7/
You see a small spacing because .wrap width is 100%+2px(border-width*2).
If you want border (or padding) don't expand element's width/height,
you may use box-sizing: border-box; http://css-tricks.com/box-sizing/
add this css-property to .wrap and you will not see "small spacing" anymore))

Resources