I have placed a image in my footer and i want it to center but i wont work
I want my image centered so i hope someone can help me take a look at my code
HTML
<div class="center">
<ul>
<li></li>
</ul>
</div>
CSS:
.center
{
width: 84px;
margin: 0 auto;
}
.center ul
{
width: 209px;
line-height: normal;
}
.center ul li
{
float: left;
margin-right: 11px;
}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display: block;
height: 33px;
width: 33px;
}
.centering_ {background: transparent url('../images/hello.png') no-repeat;}
EDIT:
Here is a example in jsFiddle: http://jsfiddle.net/XJbaM/
In my code i have two icons in my footer, what i want is remove the right icon en center de left icon in my footer, the text above the icons is already centered
SOLVED
Add a wrapper div like this.
<div>
<ul>
<li>
<div class="wrapper">
</div>
</li>
</ul>
and the css for wrapper:
.wrapper {
margin:0 auto;
width: /* how big your img is PX EM % etc */;
text-align:center;
}
I TESTED THIS IN MY BROWSER AND IT WORKS. HERE IS THE EXACT CODE I USED: A MIX OF YOURS AND MINE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.center
{
width: 784px;
margin: 0 auto;
border: 1px solid #000;
}
.center ul
{
width: 709px;
line-height: normal;
}
.center ul li
{
float: left;
margin-right: 11px;
border: 1px solid #000;
width:500px;
}
.wrapper {
margin:0 auto;
width:500px;
text-align:center;
}
.center ul li.last
{
margin-right: 0px;
}
.center ul li a
{
display:inline-block;
height: 33px;
width:100px;
}
.clear {
clear:left;
}
.centering_ {background-image:url(img/activenav.png);
background-repeat:no-repeat;}
</style>
</head>
<body>
<div class="center">
<ul>
<li><div class="wrapper"></div></li>
</ul>
<div class="clear">ss</div>
</div>
</body>
</html>
NOW WHERES MY PIRATES BOOTY?
Place the tag < CENTER > and < /CENTER > around the whole div. It will center the div.
<CENTER>
<div class="center">
<ul>
<li></li>
</ul>
</div>
</CENTER>
Related
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
I'm trying to make a website with an image horizontally aligned with a navigation bar, but I cant figure out how. I've tried floating, but all it does is put the picture on top of the navigation bar. Maybe I'm doing it wrong?
Thanks!
CSS and HTML-
#logo {
float: left;
width: 550px;
height: 250px;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
}
a {
color: #FFF;
font-family: Baumans;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFDAC2;
}
li {
display: inline;
padding: 50px;
}
ul {
text-align: center;
list-style-type: none;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>My Physical Fitness Tracker</title>
<style>
</style>
</head>
<body>
<header>
<img id="logo" src="file:///C:/Documents%20and%20Settings/Owner/Desktop/Commander%20%20Outpost/IMAGES/MPFT.png" alt="Personal Physical Fitness Tracker" />
<div id="navbar">
<nav>
<ul>
<li>home
</li>
<li>about
</li>
<li>myfitness
</li>
<li>confidencebooster
</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Set display:inline-blockto #logo and #navbar
CSS
#logo {
float: left;
width: 550px;
height: 250px;
display: inline-block;
}
#navbar {
background-color: #E66916;
border: 3px solid #FFFFFF;
width: 800px;
height: 250px;
display: inline-block;
}
DEMO HERE
Note: You need to horizontal expand the browser because your image and menu have a size...you must expect that!
If you want to force it you must set white-space:nowrap on header
CSS
header{
white-space:nowrap;
}
DEMO HERE
Fiddle for context http://jsfiddle.net/1f050smo/1/
You can set #logo and #navbar to display: inline-block;
You also need to set vertical-align: top to both the #logo and #navbar elements as the default value is baseline, which would place #navbar toward the bottom of #logo.
#logo,
#navbar {
display: inline-block;
vertical-align: top;
}
and remove the float from #logo
#logo {
width: 500px;
height: 250px;
}
i've been trying for 2 hours to align the navigation bar nicely under the header image, but it just won't do it.The first 4 list items align in a row, but the last one goes under them, + the nav bar is not centered like i want it to be. I have searched for answers everywhere, and nothing works. Help will be greatly appreciated.
p.s. i am new to css and html so be gentle.
<html>
<head>
<style>
body {
background-image: url("http://i.imgur.com/SwKXk23.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
body {
margin: 0;
}
.header {
width: 100%;
height: auto;
background-color: none;
padding-top: 24px;
}
.headerContent {
width: 1024px;
height: auto;
margin: 0 auto;
}
.headerContent a img {
width: 659px;
height: 144px;
margin: 0px auto;
display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
.nav ul li{
height: 40 px;
background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}
</style>
</head>
<body>
<div class="background">
<div class="header">
<div class="headerContent">
<a href="#">
<img style="border:0;width:900px;height:250px;" alt=""
title="" src="http://i.imgur.com/5NhCbxu.png">
</a>
</div>
<div class="nav">
<ul id="nav">
<li>Pagina principala</li>
<li>Despre noi</li>
<li>Clientii nostri</li>
<li>Produse</li>
<li>Contacte</li>
</ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>
You haven't given the nav bar enough width. Change the .nav rule:
.nav {
width:750px; <------- adjust this
margin:0 auto;
list-style:none;
}
I changed your width to 800px instead of 750px and now the menu fits on one line and is centred.
Here's a fiddle: https://jsfiddle.net/macg14fs/
Your .nav is too narrow for the content so it has wrapped. Press F12 on your browser to discover the interactive debug tools. After that, invest some time in learning about bootstrap.
With a Fiddle it would be much easier to know whats the problem, but try this:
#nav {
width: 100%;
}
#nav > li {
display: inline-block;
margin: 5px 5px 5px 5px;
text-align: center;
}
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
See the below images:
the website as viewed in chrome
http://i48.tinypic.com/2rr9zf7.png
the website as viewed in dreamweaver:
http://i50.tinypic.com/mcvey9.png
The problem is the carousel doesnt line up with the navbar at the top (see top right).
it seems to be out of line by 1mm
I believe it may have to do something with the navbar (see second image). As you can see the contact button falls below the rest of the buttons.
my theory is that its causing the carousel to be out of alignment.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<img src="../Images/webimages/banner top.jpg" />
</div>
<div id="topnav">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Technologies</li>
<li>Contact</li>
</ul>
</div>
<div id="carousel">
<iframe src="../Carousel/HTML/carousel.html" height="280" width="900" scrolling="no" frameborder="0"> </iframe>
</div>
<div id="mainbody">
<div id="bigbuttons">
<img src="../Images/webimages/Meettheteam.jpg">
</div>
</div>
</div>
</body>
</html>
CSS:
/* Reset */
a img {
border: none;
}
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 0px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin: auto; }
#topnav { width: 900px; margin: auto; }
#mainbody { width: 900px; margin:auto; clear:both; }
#list-nav li{display:inline-block;width:20%;float:left;}
#carousel { width: 900px; height: 280px; margin:auto; clear:both; }
#bigbuttons { width: 220px; height: 80px; margin:auto; margin-top: 9px; clear:both; float:left }
ul#list-nav li a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left
}
ul#list-nav li a {
text-align:center;
border-left: 1px solid #fff;
width: 100%;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
Check the code for the carousel that you are filling the iframe with. Looks like your issue is there, not with the code you have provided us.