I believe we don't have to do anything in bootstrap to make it responsive. It is by default.
If the browser size changes the app components adjust accordingly. But somehow the responsive design is not working.
Can anyone please advice Why?
My code is really simple.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet" type="text/css">
<script src="${pageContext.request.contextPath}/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
</head>
<body>
<!-- The Main wrapper div starts -->
<div class="container">
<div id="left_layout">
</div>
<div id="center_layout"><div class="span6"></div>
</div>
<div id="right_layout_one"><</div>
<div id="right_layout_two"></div>
<div id="right_layout_three"></div>
</div>
<!-- Main container div wrapper ends -->
</body>
</html>
Custom Css snippet
#left_layout{
background: #FFFFFF;
position: absolute;
top: 50px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 40px;
/* right: 10px; */
min-height: 18px;
min-width: 250px;
/* box-shadow: 10px 10px 5px #888888;
border: 1px; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
/* #center_layout{} */
#center_layout{
display: block;
background: #F8F8F8;
position: absolute;
top: 50px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 327px;
right: 430px;
min-height: 18px;
min-width: 465px;
/* box-shadow: 10px 10px 5px #888888; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
What's the point of downvoting the question. If one does not know one will ask
Just Try adding these lines at bottom insteed on header tag.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
instead of giving
${pageContext.request.contextPath}/css/bootstrap.css
try to give exact path location and give a try.
====================================
I have found out what the problem is
you are not using the class which is to be used for responsive layout using Bootstrap 3.
you better read the documents of GRID SYSTEM
Just try the code below,you take it as an example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/app.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<!-- The Main wrapper div starts -->
<div class="container">
<div class="col-md-4">
<div class="left-side-layout"></div>
</div>
<div class="col-md-8">
<div class="right-side-layout"></div>
</div>
</div>
<!-- Main container div wrapper ends -->
</body>
</html>
And include this in app.css
.left-side-layout {
height: 100px;
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.right-side-layout {
height: 100px;
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Try it.
Note : You shouldn't give fixed width for layout in pixel, if you are looking for a responsive design. instead use
<div class="col-md-4"></div>
<div class="col-md-8"></div>
or change the size according to your app. and DO READ THE DOCUMENTATION Before working on.
Related
This question already has answers here:
Transparent space between div and border with a border radius
(2 answers)
Closed 11 months ago.
I am trying to create a button with box-shadow like below:
with transparent space between the button and the shadow. How can it be implemented?
I don't think box-shadow is the best approach. You can instead try outline css property.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #aaa;
border-radius: 25px;
outline: 4px solid #aaa;
outline-offset: 4px;
}
<div class="btn">
Action
</div>
.button-wrapper {
margin: 0 auto;
display: table;
padding: 100px 0;
background-color: #625e5e;
width: 100%;
text-align: center;
}
.button-wrapper button.custom-btn {
border: 0;
background-color: transparent;
padding: 0px 0px;
border-radius: 100px;
color: #fff;
border: 5px transparent solid;
outline: 5px rebeccapurple solid;
}
body {
margin: 0;
}
.button-wrapper button.custom-btn span {
border: 0;
background-color: rebeccapurple;
padding: 10px 0px;
border-radius: 100px;
min-width: 115px;
color: #fff;
font-size: 15px;
letter-spacing: 2px;
display: block;
border: 5px transparent solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="button-wrapper">
<button type="button" class="custom-btn">
<span class="">Action</span>
</button>
</div>
</body>
</html>
I am creating a tab based system where you can add days and add information for each day. I am trying to achieve an overlapping look when it comes to the tabs and would like to add a sort of shadow like effect when a tab is being overlapped by another on the left side. In this specific example, when day one is active, day 2's inner left portion will have a bit of a shadow to make it look like it is being overlapped. How can I achieve this effect?
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
/* box-shadow: inset 0 20px 20px -20px #000000; */
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
I have tried adding in a box shadow to the tab elements that are on top of another tab. This method did not work as it looks a little cheap in my opinion.
Here is the css I tried to add to the tab css class
-webkit-box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
box-shadow: 34px 0px 25px -13px rgba(0, 0, 0, 0.75);
You can use pseudo elements for this, but the caveat is you can't use a negative z-index because of the stacking context and the need for the active tab to be above the other tabs.
This is basically using the box-shadow and the transform: skew to fake either side of the active tab.
Then I have styles for the first and last active tabs so the :before and :after, respectively, do not show up if either are active.
This approach gives you a little more of a "polished" look instead of just using box-shadow on the active tab.
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
position: relative;
}
.tab.active {
position: relative;
background-color: lightgreen !important;
z-index: 5;
}
.tab {
position: relative;
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
.tab::before,
.tab::after {
content: '';
position: absolute;
left: 0;
bottom: 2px;
box-shadow: -3px 0px 4px 1px rgba(0, 0, 0, .3);
transform: skew(-5deg,-10deg);
width: 1px;
height: 60%;
border-radius: 0;
display: none;
}
.tab::after {
left: auto;
right: 0;
box-shadow: 3px 1px 4px 1px rgba(0, 0, 0, .3);
transform: skew(5deg,10deg);
}
.tab.active::before,
.tab.active::after {
z-index: -1;
display: block;
}
.tab.active:first-child::before {
display: none;
}
.tab.active:last-child::after {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab">
Day 1
</div>
<div class="tab active">
Day 2
</div>
<div class="tab">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
Add this to the active tab: box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.4);
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
box-shadow: 2px 1px 2px 1px rgba(0, 0, 0, 0.4);
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.active {
background-color: lightgreen !important;
-webkit-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
box-shadow: 0px 10px 4px -2px rgba(0,0,0,0.75);
z-index: 5000;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
It would be nice if you could link some examples of what you are going for, but something you can possibly do is this:
/* background-image: linear-gradient(#134C13, #66AF66, lightgreen); */
.breakout-holder {
width: 100%;
border: 1px solid black;
}
.heading {
/* background-color: grey; */
height: 40px;
display: flex;
align-items: flex-end;
}
.tab {
font-weight: bold;
background-color: lightgrey;
color: black;
height: 90%;
width: auto;
padding: 0 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
border-radius: 15px 15px 0 0;
cursor: pointer;
}
.active {
background-color: lightgreen !important;
border-right: 5px solid black;
border-bottom: 2px solid black;
/* box-shadow: inset 0 20px 20px -20px #000000; */
z-index: 5000;
}
.tab:not(:first-child) {
margin-left: -5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="breakoutStyle.css">
<title>Breakout room form</title>
</head>
<body>
<div class="breakout-holder">
<div class="heading">
<div class="tab active">
Day 1
</div>
<div class="tab">
Day 2
</div>
<div class="tab" style="z-index: -10">
+
</div>
</div>
<div class="body"></div>
</div>
</body>
<script src="app.js"></script>
</html>
I'm a bit confused. I'm building an To-Do List app and I'm trying to set the header as 100% of the screen width. I have the correct meta tags, I believe, but setting the header at 100% width is stretching the element past the right side of the screen. Is there something I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<link rel="stylesheet" text="text/css" href="style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activity...">
<button></button>
</header>
</body>
</html>
#charset "UTF-8";
header {
width: 100%;
height: 80px;
position: fixed;
padding: 15px;
top: 0px;
left: 0px;
z-index: 5;
background: #25b99a;
box-shadow:0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: rgba(255,255,255,0.2);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-radius: 5px;
border: 0px;
box-shadow: none;
outline: none;
}
You need to include the box-sizing property.
Info from MDN
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
header {
width: 100%;
height: 80px;
position: fixed;
padding: 15px;
top: 0px;
left: 0px;
z-index: 5;
background: #25b99a;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
header input {
width: 100%;
height: 50px;
float: left;
background: rgba(255, 255, 255, 0.2);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-radius: 5px;
border: 0px;
box-shadow: none;
outline: none;
}
<header>
<input type="text" placeholder="Enter an activity...">
<button></button>
</header>
a.navigation:link {color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;}
a.navigation:visited {color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
The css above is what I'm using for the unvisited page and visited page. I want a visited page that has been left to revert to unvisited css style.
I usually use the same settings for :link and :visited, like this:
a.navigation:link, a.navigation:visited {
color: white; text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;
}
And I also use the same settings for :hover and :active:
a.navigation:hover, a.navigation:active {
[... your settings ...]
}
Solution
The best option is to disable that completely - Like so:
a:visited {
text-decoration: none;
}
This will remove it from showing the default visited color.
Refrences
W3Schools
<!DOCTYPE html>
<html>
<head> <title> HOME </title>
<style>
#Header {background-color: rgb(137,184,211);
background-repeat: no-repeat;
background-position: center top;
background-size: 1400px 100px;
padding-top: 0px;
padding-bottom: 100px;
padding-left: 0px;}
p.navigation {position:absolute;
margin-left: 800px;
margin-top: 45px;}
a.current:link, a.current:visited, a.current:hover, a.current:active
{color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
a.navigation:link {color: white;
text-decoration: none;
padding: 20px 20px 20px 20px;
border: 0.5px solid white;
border-radius: 70px 70px;}
a.navigation:visited, a.navigation:hover,
a.navigation:active
{color: lightgreen;
padding: 20px 20px 0px 20px;
border: 0.5px solid lightgreen;
border-radius: 70px 70px 0px 0px;}
</style>
</head>
<body>
<div id= "Header">
<p class= "navigation">
HOME
<a href= "aboutus.html" target= "_self" class= "navigation">
ABOUT US </a>
<a href= "archive.html" target= "_self" class= "navigation"> ARCHIVE
</a>
<a href= "contactus.html" target= "_self" class= "navigation">
CONTACT US </a>
</p>
</div>
</body>
</html>
I have used inline styling to put a radiused border around the five images in my index file. How do I apply this style to them by declaring css attributes/values in the external style sheet. Here is a demo of the index file http://jsfiddle.net/23nfM/embedded/result/
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>pedrosdigitalsolutions.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pds/images/cheat_1.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<?php include 'header.php' ?>
<div id="content">
<p class="tab"><font size="7"><b>For all things</b></font><br>
<font size="7"><b>Electronic Arduino</b></font><br>
<font size="7"><b>and "other stuff"</b></font><br>
<font size="6"><b>Love ♥ The Duino</b></font>
</p>
<img style="position:absolute; top:515px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual Shift Register 300x225.gif">
<img style="position:absolute; top:215px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Manual LCD 300x225.gif">
<img style="position:absolute; top:515px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/LCDBitmap_via_SR.gif">
<img style="position:absolute; top:815px; left:150px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/8_LED_Array.gif">
<img style="position:absolute; top:815px; left:692px; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px"
src="http://www.pedroduino.com/custom pd/images/Nicks Clock 300x225.gif">
</div>
<?php include 'footer.php' ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="nagging-menu.js" charset="utf-8"></script>
</body>
</html>
body {
background: #efefef;
border: none;
color: #3F4C6B;
font: normal 13px Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center; }
#content {
height: 950px;
margin-bottom: 25px;
margin: 0 auto;
padding: 30px 0;
text-align: justify;
width: 950px;
}
.default {
-moz-box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
box-shadow: 0 5px 20px #888;
height: 50px;
width: 100%; }
.fixed {
-moz-box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
box-shadow: 0 0 40px #222;
left: 0px;
position: fixed;
top: -5px;
width: 100%; }
#footer {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #98B0D9;
background: -webkit-linear-gradient(#98B0D9);
height: 70px;
position: relative;
z-index: 1;
}
h1 { line-height: 15px; }
#header {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(#606C88, #3F4C6B) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(#606C88, #3F4C6B);
border-color: #0F1620 #000000;
border-image: none;
height: 93px;
margin: 0;
width: auto; }
#logo {
border: medium none;
float: left;
margin: 0; }
#menu {
-moz-border-radius: 5px;
background: -webkit-linear-gradient(#c3d9ff, #98b0d9);
background: linear-gradient(#c3d9ff, #98b0d9) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
line-height: 50px;
margin: 0 135px;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
z-index: 5;
float: center;
}
#navi {
height: 50px;
margin-top: 0; }
ul { padding: 0; }
ul li {
display: inline;
list-style-type: none;
margin-right: 15px; }
ul li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
border-radius: 5px;
color: #fff;
padding: 3px 7px;
text-decoration: none;
text-shadow: 1px 1px 1px #000; }
ul li a:hover {
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-property: color, background;
background: #606C88;
color: #ff0; }
Strip out the inline styles, and put something like this in your external style sheet:
#content img {position:absolute; width:300px; height:225px; border: 1px solid #000000; border-radius: 8px}
Some styles specific to each image have been left out. For those, add a class or id to the image and then write styles for that image. E.g. the first image could have a class of .lalala and then you'd do this in your style sheet:
.lalala {top:515px; left:692px;}
There are a lot of ways to do that, but the easiest path for your current code would be to declare the border and some other styles in the stylesheet, and then position the images with inline styles.
So in the stylesheet, add:
#content img {
position:absolute;
width:300px;
height:225px;
border: 1px solid #000000;
border-radius: 8px;
}
Then in the html, remove all of the inline styles on each image except top and left.