I've have the horizontal line start a third way through the webpage, but getting the line to move down a bit (maybe 200-400px?) is giving me a real pain. And whenever i try to use "top:-200px;" within the style element (midline) it just makes half of the line disappear
<html>
<header>
<style>
.divider{
position:absolute;
left:33.3%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
.divider2{
position:absolute;
left:66.6%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
#left {
width:380px;
float:left;
margin-left: 100px
}
#middle {
width:380px;
float:right;
text-align:center;
margin-right: 300px
}
#right {
width:380px;
float:right;
margin-left: 40px
}
#midline{
position:relative;
left:530px;
width:1265px;
height:5px;
background: black;
}
</style>
</header>
<body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" >
<div id="left">
<font color="white">
<p>
<h1> Greetings!</h1>
</p>
<font size="6", color="white">
<h3>Welcome to my world ;D </h3>
<p>
Heres a little information about me
</p>
<p>
A photo of me VV
</p>
<div id="midline"></div>
<p>
<a href="https://www.facebook.com/shan.kulkarni.9">
<img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" />
</a>
<p>
Click on it and you'll go to my Facebook
</p>
<p>
Follow me on instagram while you're at it ;o
</p>
</div>
<div class="divider2"></div>
<div id="right">
<h2> My Hobbies </h2>
</div>
<div class="divider"></div>
<div id="middle">
<h2> Favorite Quotes</h2>
</div>
</font>
</body>
</html>
Here is the code:
https://jsfiddle.net/fjzcwfyx/
Leave out the bottom setting and set top: 200px; (not minus, but plus - that's the distance to the top). BTW: top AND bottom in one rule is too much, one of them is sufficient.
Related
I'm new to coding, making my first ever website for a college assignment and it appears that when i zoom in on my website everything kind of clashes together any help would be really appreciated!
The image at 67% zoom.
The image at 100% zoom
Code i am using:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="w3.css">
<style>
div.relative {
position: relative;
left: 5px;
top: 115px;
border: 0px solid #73AD21;
}
</style>
<style>
a {
color: Black;
}
</style>
<title>The Steakhouse</title>
<style>
body {
background-image: url("Backgroundlol.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
<div>
h1 {
position: center;
left: 640px;
top: 15px;
}
</div>
</style>
<div>
<center>
<DIV style="position: absolute; top:100px; left:800px; width:500px; height:25px"> <center> <font size="7" face="Agency FB"> <b> The Steakhouse! </b> </font> <br> <b> Why don't you up the steaks a little?! </b> </center></DIV>
<IMG STYLE="position:absolute; TOP:5px; LEFT:2px; WIDTH:280px; HEIGHT:290px" SRC="steakhouse logo.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:400px; WIDTH:250px; HEIGHT:240px" SRC="a_burned.png">
<IMG STYLE="position:absolute; TOP:5px; LEFT:1450px; WIDTH:250px; HEIGHT:250px" SRC="NRA1.png">
<IMG STYLE="position:absolute; TOP:675px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="facebook.png">
<a href="http://www.instagram.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:775px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="instagram.png">
<a href="http://www.twitter.com/TheSteakHouse"> <IMG STYLE="position:absolute; TOP:875px; LEFT:100px; WIDTH:75px; HEIGHT:75px" SRC="twitter.png">
<ul>
</div>
<DIV style="position: absolute; top:300px; left:-380px; width:1000px; height:25px"> <center> <ul>
<font face="Agency FB" size="25" <li>LINKS:</li> </font> <br>
<font face="Agency FB" size="25" <li>About Us</li> </font> <br>
<font face="Agency FB" size="25" <li>Contact</li> </font> <br>
<font face="Agency FB" size="25" <li>Reservation</li> </font> <br>
<font face="Agency FB" size="25" <li>Awards</li> </font> <br>
</ul> </center> </DIV>
<DIV style="position: absolute; top:765px; left:1000px; width:500px; height:25px"><h1> Recent News:</h1></DIV>
<DIV style="position: absolute; top:825px; left:890px; width:500px; height:25px"><H3>WEBSITE NOW OFFICIALLY LAUNCHED!</H3></DIV>
</head>
<body>
</body>
</html>
The answer is simple, elements used in creating the website believe in being there pixel fixed weather situation changes or not.
If you want to make a more dynamic website that works on various resolutions(assuming all are in the range of computer standard i.e. not small like mobile)
Break down the page into its core elements, for example Header, Body, Footer
create elements inside this based on percentages of the screen available
for ex, if sidebar occupies 20% of the body then no matter what the situation in behaves relative.
tips: create a main element and fix its height(lets say 300px header)
then you can define percentages in both height and width to various header elements.
Hope I could help, good luck.
When using two div elements and the inline-block the two div's do not stand beside one another.
This is the code. (I configured some of the paragraphs and images to work better. I made sure the result was the same first though.)
<head>
<style>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
#TEST {
width:100%;
}
#pTxt {
text-align:center;
}
#heading {
color: red;
}
</style>
</head>
<body>
<div id="line">
<div>
<img id="TEST" alt="PICTURE" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</div>
<div id="line">
<img alt="PICTURE" id="TEST" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</body>
http://jsfiddle.net/gqfmmdy9/1/
Thanks in advance.
You are setting margin-right: 75%, which is pushing the next element to the bottom. You'll have to remove it.
Fiddle
#line {
display:inline-block;
margin-left:5%;
border: 5px solid orange;
}
#line {
display: inline-block;
margin-left: 5%;
border: 5px solid orange;
}
#TEST {
width: 100%;
}
#pTxt {
text-align: center;
}
#heading {
color: red;
}
<div id="line">
<div>
<img id="TEST" alt="PICTURE" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
</div>
<div id="line">
<img alt="PICTURE" id="TEST" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
Your styles are working.
Try swapping margin-right:75%; for margin-right:2%;.
EDIT: Also, I suspect you need to give #line an explicit width declaration. Something like width:12%;.
If you want both the divs side by side, you can use <table> tag. See if this works for you.
<table>
<tr><td><div class="line">
<div>
<img class="TEST" alt="PICTURE" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
</div></td>
<td><div class="line">
<img alt="PICTURE" class="TEST" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div></td></tr>
</table>
and CSS
.line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
.TEST {
width:100%;
}
.pTxt {
text-align:center;
}
.heading {
color: red;
}
Trying to get the text beneath the "Menu" (as in Picture 2) . What is the 'correct' way to do this? I have been playing around with the meniubot and textbox margins, padding, display:block, display:inline-block, float:left, clear:both but I can't get it properly aligned as seen in the second picture.
Any ideas? Maybe I should be using a different class for each text box and set custom margins?
What I have:
What it has to look like:
HTML:
<div id="footer">
<div class="main">
<div class="logo2">
<img src="logo2small.png">
</div>
<div class="meniubot">
naujienos
krepšinio vadovas
treniruotė
įdomybės
galerija
apie mus
</div>
<div class="ytfb2">
<img src="yttopedit.png">
<img src="ftopedit.png">
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Designed for basketball
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br>
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Desiasketball coach
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ
</div>
</div>
</div>
</body>
</html>
CSS:
#footer{
bottom:0px;
background-image:url(meniuBG.jpg);
height:252px;
margin-top:220px;
}
.logo2{
float:left;
margin-top:35px;
}
.ytfb2{
clear:both;
}
.ytfb2 a{
float:left;
margin-top:40px;
margin-right:20px;
}
.meniubot{
float:left;
margin-left:15px;
margin-top:40px;
}
.meniubot a{
text-align: center;
float:left;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
padding:0px 35px 0px 35px;
text-transform:uppercase;
}
.textbox {
float:left;
margin-left:50px;
margin-top:-20px;
color:rgb(193,193,193);
font-size:14;
}
I don't want to go into deepest coding practice.
Use position:relative; display: block; to whatever contents you want to play with.
It won't affect any other tags.
Using a list might help you.
<ul class="meniubot">
<li>
Link
<div>text...</div>
</li>
</ul>
See fiddle: http://jsfiddle.net/ECd6J/
Replace all the text box like the following:
<html>
<div class="container">
<p>Wondering </p>
<ul class="textbox">
<li>How we can he</li>
<li>Ip your game</li>
<li>Basketball HQ</li>
</ul>
</div>
</html>
And change the CSS like the following:
.container{
width:200px;
}
.container p{
margin-left:40px;
font-weight:bold;
}
.textbox li{
list-style-type:none;
}
I am trying to create a base div where I can copy it as many times as I need for when I want to add new content to my website. So the Html looks like this:
<div class="post">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl
</p>
</div>
<div class="postImage"><img src="images/car.jpg" width="300" alt="car></div>
Then my css looks like this:
.post{
width:960px;
margin:0 auto;
color:#000;
background-color:#CCC;
font-family:Verdana, Geneva, sans-serif;
/*CSS3*/
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-outline: 1px dashed #000000;
-moz-outline: 1px dashed #000000;
outline: 1px dashed #000000;
-webkit-outline-offset: -5px;
-moz-outline-offset: -5px;
outline-offset: -5px;
behavior:url(PIE.htc);
}
.post p.postText {
width:500px;
padding-left:10px;
padding-bottom:10px;
}
.post p.date{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}
.postImage {
display:block;
float:left;
}
If you test it, the image doesn't float on the right of the text, but instead is below it. Any ideas on what is happening?
Try to start simple - get your positioning correct first, then add in the padding, borders, /CSS3/ stuff. http://jsfiddle.net/bEECn/
There are many ways to accomplish this, but I think wrapping your textual content in a container and floating that may be the most straight forward for you.
<div class="post">
<div class="content-wrap">
<p class="date">17/03/1014</p>
<h1>Hello World!</h1>
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div>
<div class="postImage">
<img src="http://lorempixel.com/300/300" width="300" alt="car" />
</div>
</div>
Then, this simple CSS:
.content-wrap, .postImage {
float: left;
}
From there, you can add your additional styles.
If that is your exact HTML, you have several errors. Not sure if that will completely fix your problem, but you need to fix your HTML either way.
<div class="post">
<p class="date">17/03/1014</p> <!-- Was </div> -->
<h1>Hello World!</h1> <!-- Was </div> -->
<p class="postText">djdfkjdfssdfldfskjldfskjldfskjldsfkjldsfjkldsjkldjkl</p>
</div> <!-- Was missing -->
<div class="postImage">
<img src="images/car.jpg" width="300" alt="car>
</div>
I made a JSFiddle for you.
http://jsfiddle.net/FRDKL/
I found allot of HTML errors for example:
<img src="images/car.jpg" width="300" alt="car>
U forgot an " at the end of your ALT. I hope this helps:
http://jsfiddle.net/FRDKL/
Im attempting to overlay a semi-transparent box over an image. Inside that box i would like the bottom 1/4 to be red (indicating an item purchased on sale). So far i have the image, and a semi-transparent white box over the image.
2 things currently: 1. How can i make the bottom ~1/4 of the box red 2. How can i separate/style the text i have so the Price appears at the bottom of the box in the red area (if sale), and the description appears above like in the reference image below.
Do I need to create a frame or padding around the image to ensure the boxes float in the same place?
Jfiddle: http://jsfiddle.net/3S9Dg/
What i designed that i'm trying to work towards trying to emulate for reference: http://imgur.com/zKzjIyF
The red box inside the box is on the first item on the left, the girl in the vest.
<DIV style="position: absolute; top:265px; left:125px; width:200px; height:25px"><p>Sex Dress <span id="u186-2">IN </span></p>
<p><span id="u186-4">Purple rain</span> <div class="Cash-Money" id="u187-4">
<p>Price : $455</p></DIV></p>
</div>
<div style="position: absolute; top:165px; left:40px">
<style>
div.transbox
{
width:150px;
height:65px;
margin:30px 50px;
background-color:#ffffff;
border:0px solid black;
opacity:0.81;
filter:alpha(opacity=81);
}
div.transbox p
{
margin:30px 40px;
font-weight:italics;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p><font size="1">Magic Sex Shirt In Shizam
Price: $265</font>
</p>
</div>
</body>
Sorry to say, you'll have to start over from the beginning before anyone can help you and keep their sanity! This is not how HTML code is supposed to look.
Here is a basic structure:
<html>
<head>
<title>Page title</title>
</head>
<style>
#example {
color:red;
}
</style>
<body>
<div id="example"><p>Example Div Content</p></div>
</body>
</html>
A suggested structure
JSFiddle Demo
HTML
<div class="product">
<img src="http://lorempixel.com/output/fashion-h-c-250-480-10.jpg" alt=""/>
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="price sale">Sale Price $500</span></p>
</div>
</div>
CSS
.product {
display:inline-block;
position:relative;
width:250px;
margin-right:10px;
}
.product img {
display:block;
}
.description {
position:absolute;
background:rgba(255,255,255,0.75);
top:60%;;
text-align:center;
padding:5px;
}
.description span {
display:block;
margin-top:10px;
padding:5px;
}
.sale {
background:red;
}
Feel free to adjust as required.