Okay so this is a subscription box with fancybox that I'm making and everything is going well.
Just a little problem here.
the image that I'm using is stuck to the left and even margin property is of no use.
<style type="text/css">
body{
background-image:url(../../images/subscribe.png);
background-repeat:no-repeat;
background-position:left bottom;
margin-bottom:85px;
line-height:2px;
margin-left:10px;
margin-right:10px;
}
#h1_1 {
something;
}
#h1_2 {
something;
}
#h1_3 {
something;
}
/*
#img1_1 {
background-position:left bottom;
margin:0px;
background-repeat:no-repeat;
}
*/
</style>
</head>
<body>
<p id="h1_1">
<b>Subscribe Us</b>
<br>
<p id="h1_2"> Sometext</p><!-- end h1_2 -->
<p id="h1_3"> sometext</p><!-- end h1_3 -->
</p> <!-- end h1_1 -->
<!-- <img src="../../images/subscribe.png" id="img1_1"> -->
</body>
</html>
If the margin propety is applied the whole body gets shifted
and if i don't put the image in the background, creatig in the body, this way i can't write the exact text right besides the image.
I think this gets you in the right direction:
if you use the img tag then this should work
#img1_1 {
margin-left: 20px;
}
if you use the background-image you should use background position:
body {
background-position: 20px 20px;
}
No offence, but I recommend you further dive into CSS and HTML, because this is a pretty basic CSS question.
Related
I haven't tried anything else except using vertical-align but it didn't do anything.
Here is my code.
<html>
<div id="banner">
<h2><span>HIGH QUALITY</span></h2>
<h3>CRAFTMANSHIP AT LOW EVERYDAY PRICES</h3>
<p>
LEARN MORE
CALL US NOW
</p>
</div>
</html>
<style>
#banner {background-image: url(../images/common/banner.png);background-
repeat: no-repeat;background-size: cover;font-family: 'Roboto
Slab',serif;color:#fff;height:730px;width: 1440px;}
#banner {vertical-align: bottom;display:inline-block;vertical-align:
bottom;}
#banner h2 span{background-image:
url(../images/common/orngebck.png);width:700px;padding:3px 120px
3px 120px;}
#banner a{padding:11px 20px;margin:0px;border:1px solid #fff;display:
inline-block;vertical-align: bottom;}
#banner a:hover{padding:11px 20px;margin:0px;border:1px solid
#F24134;background-color:#F24134;}
#banner h2{font-size:3.125em;font-weight:100;}
#banner h3{font-size:2.5em;font-weight:100;letter-spacing: 1px;}
</style>
Here is the image.
What I want to achieve would look like this.
If you have the following structure:
<div id="outer-box">
Normal text
<div id="inner-box">
Stuff that should be displayed at the bottom
</div>
</div>
You can use the following CSS to achieve what you want:
#outer-box {
position:relative;
/* your css code */
}
#inner-box {
position:absolute;
bottom:0px; /* distance from the bottom, you can use left, right and top as well */
/* your css code */
}
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I was trying to change an image on my page when i hover over it. I have also seen many examples about this and i'm still unable to make this work. Can anyone please tell me where am i going wrong?
Here is html my code:-
<body>
<a id="swap"> </a>
</body>
css:-
#swap {
background-image:url('slide1.jpg');
}
#swap:hover {
background-image:url('slide2.jpg');
}
This works
#swap {
display: block;
background: url('http://lorempixel.com/output/cats-q-c-100-100-8.jpg') no-repeat;
}
#swap:hover {
background: url('http://lorempixel.com/output/catsq-c-100-100-9.jpg') no-repeat;
}
Try this:
<style type="text/css">
#swap {
display:block;
position:relative;
height:100px;
width: 200px;
background-image: url(slide1.jpg);
background-repeat:no-repeat;
}
#swap:hover {
background-image: url(slide2.jpg);
background-repeat:no-repeat;
}
</style>
<body>
<div id="swap"></div>
</body>
Change width and height to your image dimentions. This solution works, I tested.
I have web page
www.turie.eu
There are some facebook comments at the bottom. What do I have to change to dynamically change the height and display all 16 comments?
I have tried to change height of every single css selector that have something to do with the comments part from single value to 100% or auto, but with no effect.
Thank you!
This is because:
#contenwrap {overflow: hidden}
When you remove this rule, you´ll get some other design issues to solve, but you are on the right path :-)
Update!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #FFF url(pozadie04.jpg) no-repeat scroll center top;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 960px;
margin: 280px auto 0; /* the auto value on the sides, coupled with the width, centers the layout */
box-shadow: 0 0 40px black; /* Not supported in IE7 and IE8 */
}
.header {
width:960px;
height:280px;
position:absolute;
top:0;
}
.headerPic {position:absolute;}
.Logo {bottom: 35px; left:98px}
.Church {bottom: 0; right:70px}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
background:rgba(255,255,255,0.9); /* Not supported in IE7 and IE8 */
border:1px solid #fff;
}
.forum {
height:130px;
}
.maps {
height:523px;
}
.fb {
width:600px;
background: #FFF url(facebookcomments_nadpis.png) no-repeat left top;
padding-top: 70px;
margin-left:15px;
}
.mb {
width:300px;
background: url(mikroblog-nadpis.png) no-repeat left top;
padding-top: 70px;
margin-right:15px;
}
.footer {
width:960px;
height:237px;
background: url(footer.png) no-repeat bottom;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header">
<img class="headerPic Logo" src="maco07.png" width="277" height="185" alt="Logo">
<img class="headerPic Church" src="kostol03.png" width="170" height="230" alt="church">
<!-- end .header --></div>
<div class="content">
<div class="forum">
<p>Place your forum in this DIV</p>
<!-- end .forum --></div>
<div class="maps">
<p>Place your Google Map in this DIV</p>
<!-- end .maps --></div>
<div class="hero">
<h1>Vitajte!</h1>
<p>Turie.eu je komunitný web s cieľom prezentovať obec Turie formou interaktívnych panoramatických fotografií. Vzhľadom na všeobecne nízku úroveň interaktivity na stránkach obcí, bude možnosť spoluvytvárať obsah Turie.eu jej návštevníkmi našou prioritou.</p>
<p>Stránka funguje vo všetkých moderných prehliadačoch a v IE8+. Ak nájdete nejaké chyby, máte návrhy na zlepšenie, alebo sa chcete podieľať na vytváraní obsahu, napíšte nám.</p>
<p>Chystané zmeny: užívateľská fotogaléria, kalendár udalostí, filtrovanie markerov, hlasovania, rezervácie..</p>
<!-- end .hero --></div>
<div class="wrap">
<div class="fb fltlft">
<h2>Facebook </h2>
<p>sdlkfjsdf kjsadf slkødfj sødlfkj sadlkfj sad flkj</p>
<p>sdlkfjslkdjflksjdflkjsdf</p>
<p>sdflkjsdlfkjsdlkfj</p>
<p>sldkfjlkdsfj</p>
<p>Float is cleared in this DIV</p>
<!-- end .fb --></div>
<div class="mb fltrt">
<h2>Mikroblog</h2>
<p>sdkfljøslkdfjlkjdsfølkj</p>
<p>sdlkfjølskdjfølksjdf</p>
<p>sdlkfjøsldkfjølskdfj</p>
<p>sdlfkjøsldkfj</p>
<p>sdlkfjøsldkfj</p>
<p>sdflkjsdøflkj</p>
<p>slskdjfølksdjf</p>
<p>Float is cleared in this DIV</p>
<!-- end .mb --></div>
<br class="clearfloat">
<!-- end .wrapper --></div>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
you can use scrolling div, Use css overflow property or overflow:auto for scroll
Here is the IE fix for rgba issue. I used Kimili´s generator on his site (great tool).
<!--[if IE]>
<style type="text/css">
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
zoom: 1;
}
</style>
<![endif]-->
I'm in the early stages of building a mobile version of our website, and I'm already having an issue with a div tag & background not centering. The stylesheet code is as follows:
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica, sans-serif;}
header {
display:block;text-align:center;width:100%;height:6.5em;
}
.topHeader {display:block; width:100%; height:5.4em;}
#acdlogo {
float:left;text-align:left; overflow:hidden; display:inline;
}
#acdHeadLinks {
float:right;text-align:right;margin-top:5px;
}
.clearAll { clear:both; font-size:0; padding:0; margin:0; }
.search-bg {
text-align:center;width:85%;background-color:#265e99;
height:45px;z-index:1000; border-radius:5px; -webkit-border-radius:5px;
}
</style>
</head>
Here is the code that appears after the stylesheet code:
<body>
<div>
<header>
<div class="topHeader" align="center">
<div id="acdlogo">
<img src="images/logo.gif" border="0" alt="Alt Text">
</div>
<div id="acdHeadLinks">
<img src="images/mcontact.png" border="0"><br>
Directions My Account My Cart
</div>
</div>
<div align="center" class="search-bg" id="searchgcs">
hello world
</div>
</header>
</div>
</body></html>
The problem is that the blue background is supposed to hold the search engine form, but it's aligning left not center, and I don't know what I need to do to center it. I'm trying real hard not to have to use tables. Anybody can help me figure this out? Thanks!
UPDATE: Alright I have a new error. I'm trying to center an image using div tags and I'm not getting anywhere, even with the answer below. I've even stripped down the code to only attempt to center the image and no go. The image is always aligned left inside the div tag and I want it centered. Here is my code:
<!DOCTYPE html>
<html><head><title></title>
<style type="text/css">
#mainImage {
width:300px;
margin:0 auto;
padding:0;
}
img.curMainImage {
max-height:240px;
max-width:240px;
}
</style>
</head>
<body>
<div id="mainImage"><img class="curMainImage" src="Image Here" border="0" /></div>
</body>
</html>
Anybody can help?
add margin: 0 auto; to your .search-bg - http://jsfiddle.net/7djxY/1/
.search-bg {
text-align:center;
width:85%;
margin: 0 auto;
background-color:#265e99;
height:45px;
z-index:1000;
border-radius:5px;
-webkit-border-radius:5px;
}
Update: the margin: 0 auto; is used to set the top and bottom margins to 0, and the left-right margins to auto. In that case the browser will automatically detect the available side margin space and distribute it equally to the left and right. And with the same margins both sides the element becomes centered.