Transfer inline style to external style sheet - css

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.

Related

Box shadow with transparent layer [duplicate]

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>

Banner not displaying CSS

I have the following code to display a banner in my CSS stylesheet.
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
The banner is not displaying. Instead I get a small white cube in the top left hand corner.
The full CSS style sheet is:
body {
font-family: lucida grande,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: #fff;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
clear: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/banner.jpg);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/footer.jpg);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<div id=banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Books</li>
<li>Publications</li>
<li>About Us</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar"></div>
<footer>
<p>All rights reserved</p>
</footer>
</body>
</html>

Looks like a double quotation marks error in the id attribute value
<div id=banner">

This is what I would do:
1. Try doing background-repeat: repeat; ... see what happens.
2. right click on the small image and click view image to confirm that the image is the right one.
3. post the html for better understanding.

CSS: Fill exact background of glyphicon

I try to fill the exact background of a round glyphicon:
so that this one
looks like that one
only with css and i want the border to be any color, my attempts with outline did not succeed. border shadow cant be an option because of the inflexible color.
please also declare the browser supported by your solution.
Here the fiddle to start:
http://jsfiddle.net/aQrPd/145/
.custom {
margin-left:10px;
background-color:white;
border-radius: 50%;
padding: 4px 3px 0 3px;
border: 3px #ccc solid;
}
.c2 {
background:black;
}

You could use box-shadow.
Browser Support for box-shadow
div {
width: 30px;
height: 30px;
background: black;
margin: 20px;
border-radius: 50%;
box-shadow: 0 0 0 5px white,
0 0 0 10px #CBCBCB;
}
<div></div>

#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
.custom {
margin-left: 10px;
background-color: white;
border-radius: 50%;
padding: 4px 3px 0 3px;
border: 3px #ccc solid;
}
.custom:before {
content: '';
display: inline-block;
border-radius: 100%;
background: #000;
height: 14px;
width: 14px;
}
<br />
<br />
<span class="custom glyphicon glyphicon-ok-circle"></span>
<br />
<br />
<img src="http://fs2.directupload.net/images/150101/gxdavpdq.png" />

HTML and CSS not positioning a div correctly

I was working on my website and suddenly I have encountered a problem, I don't want to set a a height to my pagewrap div but then it's not displaying correctly, I want it to be displayed full scrren. I will post the link to the image, and in the pic you will see a grey box I want it to be displayed full screen.
here's the link:
http://i62.tinypic.com/1428t47.png
here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="css/media-queries.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div id="pagewrap">
<div id="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="sidebar">
<div class="widget">
<ul>
<li style="border-top:0 !important;">Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
</div>
<div class="contenu">
<div class="post clearfix">
<h1 class="post-title">Acceuil</h1>
<br/><p>Ici vous trouverez toutes les informations conçernant moi, mes études, mes projets et ma formation.</p>
</div>
</div>
</div>
</body>
</html>
Here's my CSS:
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
float: left;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
/************************************************************************************
Contenu
*************************************************************************************/
.contenu{
background: #fff;
margin: 30px 0 30px;
padding: 20px 35px;
width: 600px;
float: left;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0;
padding: 0;
/*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
font-family:stainy;
font-size:46px;
text-align:center;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}

Let me know if this is what you were after:
http://jsfiddle.net/9yVTt/
Here's what I did:
Removed float:left from #sidebar & .contenu
Set both of them to inline-block, and vertical-align:top
I also gave .contenu a margin-left of -4px to make up for the inline-block space bug
CSS
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
width: 1000px;
margin: 0 auto;
background:#3c3c3c;
/*SHADOW*/
-webkit-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
box-shadow: 0 3px 3px 0px rgba(0,0,0,.4);
}
/************************************************************************************
MENU
*************************************************************************************/
/**Side Bar**/
#sidebar {
width: 250px;
margin: 10px 30px 0 24px;
}
.widget {
background: #f5f5f5;
margin: 0 0 30px;
padding: 10px 20px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.widget ul {
margin: 0;
padding: 0;
}
.widget li {
margin: 0;
padding: 12px 0;
list-style: none;
clear: both;
border-top: solid 1px black;
}
.widget ul li a{
font-family:stainy;
font-size:21pt;
color:#303438;
}
.widget ul li a:hover{
text-decoration: none;
outline: none;
color:#30c9e0;
font-size:22pt;
}
.widgettitle{
font-family:stainy;
font-size:20pt;
}
/************************************************************************************
Contenu
*************************************************************************************/
#sidebar,
.contenu{display:inline-block; vertical-align:top;}
.contenu{
background: #fff;
margin: 30px 0 30px -4px;
padding: 20px 35px;
width: 600px;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* post */
.post {
margin-bottom: 40px;
}
.post-title {
margin: 0;
padding: 0;
/*font: bold 26px/120% Arial, Helvetica, sans-serif;*/
font-family:stainy;
font-size:46px;
text-align:center;
}
.post-title a {
text-decoration: none;
color: #000;
}
.post-meta {
margin: 0 0 10px;
font-size: 90%;
}

Div takes the place of another div when I zoom in

I am new to HTML and CSS. I have started to make my own website, I have encountered a problem, it's that when I zoom in the content div goes into the menu div. I can't seem to find the answer by myself so it would great if you could help me.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div id="vmenu">
<ul>
<li>Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
CSS:
/******************Custom Styles********************/
#font-face
{
font-family: stainy;
src: url(../font/stainy.ttf);
}
body{
background:url(../img/bg.png) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0 ;
padding:0;
height: 100%;
width: 100%;
}
.logoBar{
background:url(../img/LogoBar.png) ;
height:149px;
position:relative;
width: 100%; min-width: 960px;
}
.helper{
height:120px;
width:100%;
display: table;
}
.logo{
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
}
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
/***border: solid 2px #30c9e0;***/
width: 13.5em;
float:left;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
color: #6F8083;
font-family: stainy;
}
div#vmenu ul a:link {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:23pt;
color: #6F8083;
font-family:stainy;
display: block;
}
div#vmenu ul a:active {
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
color: black;
font-family: stainy;
font-size:23pt;
}
div#vmenu ul a:visited {
margin: 0;
color: #6F8083;
font-family: stainy;
text-decoration: none;
font-size:23pt;
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:24pt;
background-color: #30c9e0;
color: black;
}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:white;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}

To achieve what you're looking for, without modifying the layout you've created, you could add a min-width to your body style. (for your layout, 1150px ought to do it, but that is a weirdly irregular minimum width for any device. just FYI.)

you have to maintain divs % like this
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
width: 20%;
float:left;
background:#036;
}
.contentWaper{ width:79%; float:left;}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:#000;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}
<div class="contentWaper">
<div class="content">
</div>
</div>

What you can do is Added one more div to wrap .content
and give margin-left: 14em to wrapped div
Here is the demo

Resources