I am making a website and I want, on different displays, for it to look almost the same, if I zoom the margin to be smaller - I think you know what I am trying to say. I am looking at another site to see how it works. You can check it here: http://motika.com.mk/. Try to zoom there. I don't know what the problem is.
This is my code:
<head>
<link rel="stylesheet" href="dodatoci/stilovi/stilovi.css">
<meta charset="utf-8"/>
<title>Услуги | Што се нуди?</title>
</head>
<body>
<div id = "glavendrzac">
<!--<table id = "goretabela">
<tr>
<td style="width:220px;"><img src="dodatoci/sliki/logo.png" id = "logoslika" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></td>
<div class="dropdown">
<td style="width:220px;"><button class = "dropbtn"></button></td>
</div>
</div>
</tr>
</table>-->
<div id = "meni">
<nav>
<ul id = "meninav">
<li><img src="dodatoci/sliki/logo.png" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></li>
<li><div class="dropdown" style="float:left;">
<button class="dropbtn"></button>
<div class="dropdown-content" style="left:0;">
<table id = "tabelamenispusti">
<tr>
<td>
Берово
Битола
Богданци
Валандово
Велес
Виница
Гевгелија
Гостивар
Дебар
</td>
<td>
Делчево
Демир Капија
Демир Хисар
Кавадарци
Кичево
Кочани
Кратово
Крива Паланка
Куманово
</td>
<td>
Крушево
М. Брод
M. Каменица
Неготино
Охрид
Пехчево
Прилеп
Пробиштип
Радовиш
</td>
<td>
Ресен
Свети Николе
<strong>Скопје</strong>
Струга
Струмица
Тетово
Штип
</td>
</tr>
</table>
</div>
</div></li>
</ul>
</nav>
</div>
<div id = "uslugibn">
<img style="width:100%; height: 300px;" src="dodatoci/sliki/banner.png"/>
</div>
<div id = "reklama">
<img src="dodatoci/reklami/setec1.jpg" style = "width:100%;"/>
</div>
</div>
</body>
And this is CSS code:
body{
background-color: #e4e4e4;
margin: 0;
}
#glavendrzac{
margin-left: 10%;
margin-right: 10%;
margin-top: 1em;
background-size: contain;
}
.logoslika:hover{
cursor:text;
}
#goretabela{
border-collapse: collapse;
background-color: #41c2ac;
width: 100%;
}
#goretabela td{
border-collapse: collapse;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
#goretabela td tr{
border-collapse: collapse;
}
.dropbtn {
background-image: url("../sliki/meni.jpg");
width: 220px;
height: 60px;
border: none;
cursor: pointer;
display: inline;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
.dropdown-content a {
color: black;
padding: 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #51d2bc}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-image: url("../sliki/menihover.jpg");
}
#uslugibn{
background-image: url("../sliki/banner.png");
width: 100%;
height: 300px;
}
#meninav{
background-color: #41c2ac;
height: 60px;
margin: 0;
}
#meninav li{
display: inline-block;
}
#tabelamenispusti{
border: 2px solid #41c2ac;
padding: 0;
margin: 0;
}
#tabelamenispusti a{
width: 150px;
}
#tabelamenispusti td{
padding: 0;
margin: 0;
}
Can you add this code
#main {
max-width: 1278px;
width: 90%;
}
Related
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
In my title I am trying to have two images on both sides of the text. I have tried a few methods, but none have worked. Here is my live website. I would like to have the icons also automatically resize based on the window size. Any help is greatly appreciated.
Related code here:
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
<p align="middle" class="rusty"> RedstoneGaming </p>
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
var rick = false;
var audio = new Audio('rick_roll.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
kkeys = []; // <-- Change here
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.pause(); // <-- another issue
}
}
});
/*Some Fonts Here:*/
#font-face { font-family: Rusty; src: url('BrushScriptStd.otf');}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background
{
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position:absolute;
}
.menubar {
position: relative;
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
z-index: 1;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 100%;
margin: 0px auto;
text-align: center;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Ek Mukta';
}
.menu a {
transition: all linear 0.15s;
color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: rgba(189, 34, 34, 1);
}
.menu .arrow {
font-size: 0.95vw;
line-height: 0%;
}
.menu > ul > li {
float: middle;
display: inline-block;
position: relative;
font-size: 1.2vw;
}
.menu > ul > li > a {
padding: 0.7vw 5vh;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
.menu li:hover .sub-menu {
display: block;
}
.sub-menu {
width: 100%;
padding: 0px 0px;
position: absolute;
top: 100%;
left: 0px;
display: none;
transition: opacity linear 5.8s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 1.2vw;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #3e3436;
}
.Rusty
{
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
}
.content
{
opacity: .85;
position: relative;
margin: auto;
width: 80%;
z-index: 0;
background-color: #CCCCCC;
padding: 10px;
height: 100%;
}
.menu > ul > .login
{
position: absolute;
top: 0;
right: 0;
}
.video-container {
position:relative;
padding-bottom: 5%;
padding-top: 30px;
width: 100%;
border-bottom: thick solid rgba(189, 34, 34, 1);
}
.video-container iframe, .video-container object, .video-container embed {
position: relative;
top:15%;
left:15%;
right:15%;
width: 25vw;
height:25vh;
}
.title
{
text-align: center;
font-size: 7vh;
text-decoration: underline;
-moz-text-decoration-color: inherit;
text-decoration-color: inherit;
}
.feed-column
{
width: 50%;
height: 100%;
}
.border-right
{
border-right: thick solid rgba(189, 34, 34, 1);
}
.text-center
{
text-align: center;
}
.footer
{
background: #CCCCCC;
position:fixed;
bottom:0px;
height: 50px;
width: 100%;
opacity: .85;
}
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="script.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<title>RG - Home</title>
</head>
<body class="background">
<div class="menubar">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="aboutme.html">About Me
<span class="arrow">▼</span></a>
<ul class="sub-menu">
<li>
Gaming
</li>
<li>
Programming
</li>
<li>
YouTube
</li>
<li>
Other
</li>
</ul>
</li>
<li>
Schedule
</li>
<li class="current-item">
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->
</li>
<li>
Equipment
</li>
<li>
Contact Me
</li>
<li class="login">
Login/Sign Up
</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="rusty title">ThatRedstoneGuy's Feed</h1>
<div class="border-right feed-column">
<h1 style="font-size: 3vh;" class="rusty text-center">Colortone | Am I colorblind?! | W/Voiceless</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2%20align="></iframe>
</div>
</div>
<div class="feed-column">
</div>
</div>
<div class="footer">vv</div>
</body>
</html>
make p tag inline.
.rusty {
font-family: "Rusty";
color: rgba(189, 34, 34, 1);
display: inline;
}
try this code:
.menu li.current-item {
float:none;
width:100%;
}
just change you code
<a href="#"><!--Here is where-->
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico"><p align="middle" class="rusty"> RedstoneGaming </p><img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</a><!---------->"
to
<div>
<div class="left">
<img style="width: 15px; height: 15px;" align="left" src="favicon.ico">
</div>
<div class="middle">
RedstoneGaming </p>
</div>
<div class="right">
<img style="width: 15px; height: 15px;" align="right" src="favicon.ico">
</div>
<div class="clearfix"></div>
<style>
.left{
float:left;
}
.middle{
float:left;
}
.right{
float:left;
}
.clearfix{
clear:both;
}
</style>
There are plenty of methods, each width some pros and cons.
If you need maximum possible browser compatibility, use:
Method 1
The markup:
<table>
<tr>
<td><img src="path/to/img"></td>
<td><p>This is text</p></td>
<td><img src="path/to/img"></td>
</tr>
</table>
the CSS:
table{
width: 100%; border: none;
border-spacing: 0;
border-collapse: collapse;
text-align: center
}
table img, table p{
display: inline
}
If you have some flexibility on browser compatiility, you may choose the inline-block method:
Method 2
The markup:
<div class="parent">
<img src="path/to/img"><!--
--><p>This is text</p><!--
--><img src="path/to/img">
</div>
the CSS:
.parent{
text-align: center
}
img, p{
display: inline-block;
vertical-align: middle
}
I am working on an assignment and I need to place some images in a table, which normally isn't a problem for me. Today when I added the images to the table it just displays a square border with the alt text written in it. I am pretty sure that I am pointing to the right directory.
My folder structure is:
Website
css
fonts
html (Page with table in here)
js
images (Images for table in here)
#font-face{ font-family:customFont; src: url('../fonts/Balkeno.ttf'); }
* {
margin: 0;
border: 0;
padding: 0;
font-size: 12px;
font-family: arial, sans-serif;
}
body {
width: 100%;
height: 300%;
background-color: #D8D8D8;
}
nav {
font-family: customFont;
font-size: 30px;
width: 100%;
height: 40px;
position: fixed;
z-index: 50;
}
.nav-background {
width: 100%;
height: 100%;
background: #12A7CB;
opacity: 0;
position: absolute;
}
.nav-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}
header {
width: 100%;
height: 320px;
}
#slideshow {
position:relative;
height:320px;
width: 100%;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width: 100%;
height: 320px;
box-shadow: 0px 5px 10px #5E5E5E;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#logo {
float: left;
padding-left: 100px;
padding-right: 200px;
}
#nav {
background: url(http://4.bp.blogspot.com/-dVtgikk-kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top left; background-color: transparent;
width:100%;
height:50px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title {
display:none;
color:#EDEDED;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
.navigation li{
list-style-image: url('navIcon.png');
float: left;
padding-right:45px;
margin-bottom: 25px;
color: black;
}
li {
}
.navigation a {
font-size: 19px;
font-family: customFont;
text-decoration:none;
color: #01ebfe;
}
.navigation a:hover {
}
.wrapper {
width: 900px;
height: 1000%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: white;
padding-top: 100px;
box-shadow: 10px 10px 5px #888888;
}
p{
font-size: 14px;
padding-bottom: 32px;
}
p:first-letter {
font-size: 32px;
color: #71CAE0;
}
h1 {
font-family: customFont;
font-size: 32px;
font-weight: bolder;
color: #12A7CB;
text-align: center;
}
h2 {
font-family: customFont;
font-size: 22px;
font-weight: bold;
color: #12A7CB;
text-align: left;
text-decoration: underline;
}
section {
width: 100%;
height: 100%;
background-color: #D8D8D8;
}
img.logo {
text-align: center;
margin: auto;
display: block;
}
img.slideshow {
width: 100%;
height: 480px;
}
footer {
width: 900px;
margin: 25px auto 0 auto;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
background-color: white;
text-align: center;
box-shadow: 10px 10px 5px #888888;
}
.members {
padding: 10px;
display: inline-block;
background-color: #e4f4f8;
margin-top: 15px;
margin-left: 15px;
border: 1px solid #12A7CB;
float: right;
}
ol.test {
list-style-type: lower-alpha;
}
.members ol {
list-style-type: lower-alpha;
}
.members li {
display: list-item;
color: #6c6c6c;
list-style-type: lower-alpha;
padding: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
/* TABLE STUFF */
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
padding: 5px;
color: #12A7CB;
background-color: #e4f4f8;
}
td {
background-color: #f2eded;
width: 150px;
height: 150px;
}
/* END TABLE STUFF */
.video-wrapper {
width: 100%;
text-align: center;
}
.video-wrapper a {
color: blue;
text-decoration: none;
font-size: 12px;
font-family: arial, sans-serif;
}
.social img {
padding-top: 32px;
padding-right: 8px;
width: 48px;
height: 48px;
border: none;
}
<!DOCTYPE html>
<html>
<!--
Author: #####
Date: 11/08/2014
-->
<head>
<meta charset="utf-8" />
<title>Home - Three Doors Down</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<script type="text/javascript" src="../js/header.js"></script>
</head>
<body>
<nav class="nav">
<div class="nav-background">
</div>
<div class="nav-content">
<img src="../images/navTitle.png" alt="Three Doors Down" id="logo" width=250 />
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</nav>
<header class="header">
<div id="slideshow">
<img src="../images/header1.jpg" alt="Three Doors Down" class="active" />
<img src="../images/header2.jpg" alt="Three Doors Down" />
<img src="../images/header3.jpg" alt="Three Doors Down" />
</div>
</header>
<section>
<div class="wrapper">
<h1>Discography</h1>
<div class="disco" >
<table >
<tr>
<th>
Album
</th>
<th>
Year
</th>
<th>
Record Label
</th>
<th>
CD Cover
</th>
</tr>
<tr>
<td >
The Better Life
</td>
<td>
2000
</td>
<td>
Universal Republic
</td>
<td>
<img href="../images/theBetterLifeCover.jpg" alt="The Better Life" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Away from the Sun
</td>
<td>
2002
</td>
<td>
Universal Republic
</td>
<td>
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
</td>
</tr>
<tr>
<td >
Seventeen Days
</td>
<td>
2005
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
<tr>
<td >
3 Doors Down
</td>
<td>
2008
</td>
<td>
Universal Republic
</td>
<td>
<image />
</td>
</tr>
<tr>
<td >
Time of My Life
</td>
<td>
2011
</td>
<td>
Universal Republic
</td>
<td>
Cover
</td>
</tr>
</table>
</div>
</div>
</section>
<footer>
<div class="nav-content">
<ul class='navigation'>
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Video</li>
</ul>
</div>
</footer>
</body>
</html>
Changed href="../images/imageName.png" to src="../images/imageName.png"
change the code below code...
<image href="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
New code
<image src="../images/awayFromTheSunCover.jpg" alt="Test" width="100" height="100" />
href attr is for links i.e for a tag. For image use src attr
I checked your code. The image path is you mentioned in your HTML code is point to this link only. So check the path and make sure the images are there
It's < img src="" >, not < img href="" >.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cougar Inn Directions</title>
<link rel="stylesheet" type="text/css" href="case.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="case.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div id="header">
<h1>This is the Cougar Hotel</h1>
</div>
<div id="navcon">
<div id="nav">
<ul>
<li style="border-Left: 1px solid #e9e9e9">Home</li>
<li>About Cougar Inn
<ul>
<li>Accommodations</li>
<li>Services/Amenities</li>
<li>Meeting/Events</li>
</ul>
</li>
<li>Reservations</li>
<li>Directions</li>
<li>Contact Us
<ul>
<li>Phone</li>
<li>Email</li>
<li>Feedback</li>
</ul>
</li>
</ul>
</div>
<!-- end navcon -->
</div>
<!-- end nav -->
<div id="pagewrapper">
<div class="pagecon">
<h2>This is class pagecon</h2>
<p>
<div id="slideshow">
<div>
<img src="hotel 1 s.jpg" alt="HomePic1">
</div>
<div>
<img src="hotel 4 s.jpg">
</div>
<div>
<img src="hotel 6 s.jpg">
</div>
</div>
<div class="bodycon">
<h1>Directions to</h1>
<iframe width="425" height="350"
src="https://maps.google.com/maps;output=embed"></iframe>
</div>
<!--end bodycon -->
<table border='1' class="tablecon">
<tbody>
<tr>
<td>
<p>
*From Hwy 37 get off at the Stadium exit and head<br>
east down Broadway to N College Ave. Turn right on College<br>
onto Bangle Street. We are right next to Columbia College.
</p>
</td>
<tr>
<td>
<p>
*From I-141 get off at the Hues St exit. Head south<br>
on Hues till you get to Bangle St. Turn right on Bangle<br>
and you will see the Bangle Inn next to the College.<p>
</td>
</tr>
</tbody>
</table>
</div>
<!--end class pagecont -->
</div>
<!-- end pagewrapper -->
</body>
</html>
Here is the css:
* {
margin: 0px;
padding: 0px;
}
#header {
background-image: url(./headimg.jpg);
height: 60px;
background-repeat: repeat;
}
#navcon {
background-image: url(./wood.jpg);
width: 100%;
border-bottom-style: solid;
border-bottom-width: thick;
border-bottom-color: #083272;
}
#nav {
width: 450px;
height: 30px;
position: relative;
color: #080808;
font-family: arial, sans-serif;
margin: 0px auto;
font-size: .9em;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
border-right: 1px solid #e9e9e9;
padding: 5px;
display: block;
text-align: center;
color: #080808;
text-decoration: none;
}
#nav ul li a:hover {
background: #144678;
color: #fff;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
position: absolute;
z-index: 1;
}
#nav ul li:hover ul li a {
display: block;
background: #144678;
color: #fff;
width: 120px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#nav ul li:hover ul li a:hover {
background: #4879A5;
color: #fff;
}
body {
background: #B5C4D9;
}
#pagecont {
width: 980px;
margin: 0 auto;
position: relative;
}
.pagecon {
background-image: url(./mainbackimg.jpg);
margin: 15px;
padding: 15px;
border-style: solid;
position: relative;
min-height: 100%;
float: left;
}
.bodycon {
background: #5F86C0;
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
.tablecon {
margin: 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
float: left;
}
#slideshow {
margin: 10px auto;
position: relative;
width: 350px;
height: 247px;
padding: 10px;
float: left;
border-style: solid;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
Im trying to get the boxes to line up so that he pictures are on the left. The "directions to" box should be next to the pictures box and even with it on top. The table should be directly below the pictures box (not do far down). I have been playing with this for a while and could really use some help.
Well, I changed your code around a bit. I created a wrapper around your #slideshow div and inserted the table with slideshow into that wrapper to make them a column like so:
<div class="left-wrapper">
<div id="slideshow">
<div>
<img src="hotel 1 s.jpg" alt="HomePic1">
</div>
<div>
<img src="hotel 4 s.jpg">
</div>
<div>
<img src="hotel 6 s.jpg">
</div>
</div>
<table border='1' class="tablecon">
<tbody>
<tr>
<td>
<p>
*From Hwy 37 get off at the Stadium exit and head<br>
east down Broadway to N College Ave. Turn right on College<br>
onto Bangle Street. We are right next to Columbia College.
</p>
</td>
<tr>
<td>
<p>
*From I-141 get off at the Hues St exit. Head south<br>
on Hues till you get to Bangle St. Turn right on Bangle<br>
and you will see the Bangle Inn next to the College.<p>
</td>
</tr>
</tbody>
</table>
</div>
Class of that wrapper is :
.left-wrapper {
display: inline-block;
}
The new css for #slideshow is:
#slideshow {
margin: 10px auto;
position: relative;
width: 350px;
height: 247px;
padding: 10px;
border-style: solid;
}
The new css for .bodycon is :
.bodycon {
background: #5F86C0;
margin: 10px 20px;
padding: 15px;
border-style: solid;
position: relative;
height: auto;
min-height: 100%;
display: inline-block;
vertical-align: top;
}
And findally updated fiddle
Your div.bodycon appears lower than your div#slideshow because their top-margin settings differ. Set both to an equal number.
http://jsbin.com/yovit/1/
.bodycon {
margin: 10px;
/* Etc. */
}
#slideshow {
margin: 10px;
/* Etc. */
}
I have tabs and i have some div, when i click the tabs the particular div should be shown.
but when i click the tab, multiple div are shown at a same time. How to show only one div when i click one tab?
here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="ie-test">
<ul class="group" id="boxLinks">
<li>Description</li>
<li>Audience</li>
<li>Objectives</li>
<li>Prerequisites</li>
<li>Duration</li>
</ul>
<div id="box">
<br>
<div class="box" id="box1">1</div>
<div class="box" id="box2">Another box!</div>
<div class="box" id="box3">Woot!</div>
<div class="box" id="box4">Another box!</div>
<div class="box" id="box5">Anotheasfr box!</div>
<br>
</div>
</div>
</body>
</html>
css
#ie-test {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
margin: 0;
padding: 0;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
#boxLinks li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#box {
border: 1px solid #CCCCCC;
height: 522px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
width: 90%;
}
.box {
display: block;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target {
display: block;
height:auto;
}
try jquery tabs or if u want only in css use this one.
.box {
display: none;
height: 250px;
position: relative;
}
#box1:target, #box2:target, #box3:target, #box4:target, #box4:target {
display: block;
height:auto;
}
you can use jqueryui tab:its easy to use and nice .
Checkout the following JSFIDDLE:
$('ul.group > li > a').click(function(event){
$('div.box').each(function(){$(this).css('display', 'none');});
$('div'+$(this).attr('href')).css('display', 'block');
});
$('ul.group > li > a[href=#box1]').click();
You can use jquery .
below is working code which is using jquery.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ie-test {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
#boxLinks {
list-style: none outside none;
overflow: hidden;
margin: 0;
padding: 0;
}
#boxLinks li {
display: inline;
}
#boxLinks li a {
border: 1px solid #CCCCCC;
color: black;
display: block;
float: left;
left: 1px;
margin-left: -1px;
padding: 5px 10px;
position: relative;
text-decoration: none;
}
#boxLinks li a:hover {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
}
#box {
border: 1px solid #CCCCCC;
height: 522px;
overflow: hidden;
padding: 0 30px;
position: relative;
top: -1px;
width: 90%;
}
.box {
display: block;
height: 250px;
position: relative;
}
#box1:target {
display: block;
height:auto;
background-color:red;
}
#box2:target {
display: block;
height:auto;
background-color:red;
}
#box3:target {
display: block;
height:auto;
background-color:red;
}
#box4:target {
display: block;
height:auto;
background-color:red;
}
#box5:target {
display: block;
height:auto;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-2.0.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").each(function()
{
$(this).css("display","none");
});
});
function Show(boxName)
{
$('.box').css("display","none");
$('#'+boxName).css("display","block");
}
</script>
</head>
<body>
<div id="ie-test">
<ul class="group" id="boxLinks">
<li>Description</li>
<li>Audience</li>
<li>Objectives</li>
<li>Prerequisites</li>
<li>Duration</li>
</ul>
<div id="box">
<br>
<div class="box" id="box1">1</div>
<div class="box" id="box2">Another box!</div>
<div class="box" id="box3">Woot!</div>
<div class="box" id="box4">Another box!</div>
<div class="box" id="box5">Anotheasfr box!</div>
<br>
</div>
</div>
</body>
</html>