my sample code below, works in all browsers apart from ie9, in ie9 the leftcolumn is actually nearer the middle of the page for some reason! (im sure if you copy paste you will be able to replicate)
anyone help me out as to why? the css seems fine to me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body, html, form {
padding:0;
margin:0;
}
body {
font-family:"Segoe UI",Tahoma,Helvetica,Sans-Serif;
font-size:12px;
color:#333333;
}
#container {
min-width:1200px;
}
#horizontal-nav {
background: #1AA2DE;
width: 100%;
height:41px;
}
#left-column {
margin-top:10px;
width:210px;
float:left;
}
#center-column {
float:left;
width:180px;
margin-top:10px;
}
#right-column {
margin-top:10px;
float:left;
margin-left:10px;
}
/* TOP NAV */
.hmenu,
.hmenu ul {
list-style: none;
margin:0;
padding: 0 0 0 20px;
}
.hmenu {
font-size: 16px;
float: left;
}
.hmenu > li {
float: left;
}
.hmenu li a, .hmenu li span {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
}
.hmenu > li:hover > a {
background: #5EBEE8;
}
</style>
</head>
<body>
<div id="container">
<div id="horizontal-nav">
<ul class="hmenu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="left-column">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="right-column">
Right Content
</div>
</div>
</body>
</html>
http://jsfiddle.net/isherwood/Wgtcy/
The positioning of the horizontal-nav div is throwing off your subsequent floats in the container div in IE9. Give your horizontal-nav div a float: left; to fix.
Unless you plan on creating a fixed header you should always have block-level elements playing by the same positioning rules. Since you are using float:left; for the other block elements then this will fix on ALL machines, regardless of weird configs people are running in random browsers.
Related
My logo is not resizing on mobile devices and therby my menu overlaps the logo. I've hard coded the css property for my logo for desktop screen since I want my logo to appear big on desktop but i want it to resize on mobile devices and I have set setting for it but it does not work, kindly please tell me what is the best solution or what i'm doing wrong, how can i fix it.
.logo {}
#logoimg {
width:250px; height:70px; transition: all .3s ease;
}
/*============= media query max-width: 768px; =============*/
#media only screen and (max-width:768px) {
/* start query */
.header { padding-top: 5px; padding-bottom: 5px;}
.logo img {width:auto;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
img {
width: auto ;
max-width: 100% ;
height: auto ;
}
/*============= media query max-width: 768px; =============*/
#media only screen and (max-width:768px) {
/* start query */
.header {
padding-top: 5px;
padding-bottom: 5px;
}
.img {
width:100%;
height:auto;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- logo -->
<div class="col-md-12">
<img src="https://upload.wikimedia.org/wikipedia/en/9/91/National_Film_and_Television_School_Logo.jpg" alt="logo"> </div>
<!-- logo -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="navigation"> <!-- navigation start-->
<ul>
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2 </li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
use class img-responsiv
It will help you
I want to make one navbar on the top of the page hold both a logo and some menu items, like seen on www.adidas.se. However I dont want to use an image as logo, just plain text will do. So basically on the right of the navbar there will be a logotext and from the left side there will be an unordered list that will hold the menu items. I need the logo text to be larger than the other text.
This is my code so far:
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LOGO</h1>
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</body>
</html>
What I suggest is using display:inline-block for most of your positioning. Check the snippet below and let me know if it helps, and if you need more help or clarification :)
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
.nav {
display: inline-block;
}
.nav ul li {
display:inline-block;
list-style:none;
}
.header h1{
display: inline-block;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LOGO</h1>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Make the header a fixed-width container with position: relative, and the list and h1 absolutely positioned inline-blocks inside the header, with bottom and left/right values as below:
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.header {
position: relative;
height: 80px;
background: red;
color: white;
padding: 5px;
}
.header h1 {
position: absolute;
right: 5px;
bottom: 0;
}
.nav ul {
position: absolute;
bottom: 0;
}
.nav ul li {
display: inline-block;
}
.nav ul li a {
text-decoration: none;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8" />
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<ul>
<li>ITEM 1
</li>
<li>ITEM 2
</li>
<li>ITEM 3
</li>
<li>ITEM 4
</li>
</ul>
</div>
<h1>LOGO</h1>
</div>
</div>
</body>
</html>
I guess the ideal would be to put all your header info in a div or a header and then float the information inside.
header {
background: red;
color: white;
position: relative;
width: 100%;
height: 80px;
}
.header, .nav {
float: left;
}
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
<body>
<div class="container">
<header>
<div class="header">
<h1>LOGO</h1>
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</header>
</div>
</body>
But after that, you would still have to style a lot of things, like your nav. There is still a lot of work to do.
Maybe something like this?
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.header-container {
width: 100%;
position:fixed;
background:#acacac;
}
.header-text {
display: inline-block;
background: red;
color: white;
font-size:2em;
}
.nav {
display:inline-block;
}
.nav ul {
list-style: none;
}
.nav ul li{
display:inline-block;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="header-container">
<div class="header-text">
LOGO
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
i've been facing trouble with aligning some content to center of a page... the point is, i was able to achieve it .. but when the browser is resized, the content on the left side is not visible.. i am not sure where i am going wrong.. the code is as follows...
HTML Code ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">
<div id="menualign">
<ul>
<li class="topli">Home</li>
<li class="topli">site 1</li>
<li class="topli">Site 2</li>
<li class="topli">Logout</li>
</ul>
</div>
<img src="bgn.jpg" width="900" height="7" id="bar">
</div>
</body>
</html>
CSS Code is as follows
#container
{
width:920px;
height:600px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -300px;
}
#menualign
{
position:relative;
left:24%;
}
#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }
#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}
img.logo
{
position:relative;
top:20px;
}
#menualign ul li a:hover
{
color:black;
font-size:17px;
}
You need to position your container with margin:0 auto; and then give float:left to the image and float:right to the menu. Last give menu line-height of the image height to align it verticaly.
#container
{
width:920px;
margin:0 auto;
}
#menualign ul li {
margin-top:10px;
line-height:83px;
float:left;
}
img.logo
{
float:left;
margin-top:10px;
}
Ok i made a little jsFiddle and I hope it will help.jsFiddle
Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.