<html>
<style>
body { background-color:#F1EEF2; }
header {
width:800px;
margin-left:auto;
margin-right:auto;
}
layout {
min-width: 100%;
min-height: 100%;
}
nav.header {
width:800px;
height:40px;
background-color:#000000;
color:#fef8f0;
}
nav.footer {
width:800px;
height:30px;
color:#fef8f0;
}
footer {
width:800px;
height:80px;
background:url(images/footer_beans.png) no-repeat #000000;
margin-left:auto;
margin-right:auto;
}
span {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#c29a5f;
}
p.s1 {
font-family: sans-serif;
font-size:15px;
color:#ffffff;
margin:0px;
padding:10px 24px 0;
}
p.s2 {
font-family: sans-serif;
font-size:15px;
color:#000000;
margin:0px;
padding:12px 10px 15px 12px;
}
ul.header {
width:500px;
margin:0;
padding:0;
padding-top:13px;
float:right;
list-style-type:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
ul.footer {
width:500px;
float:right;
list-style-type:none;
margin: 0;
padding:0;
padding-top:47px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
li {
float:left;
font-size:11px;
font-weight:bold;
margin:0;
}
a {
padding:8px;
color:#fef8f0;
text-decoration:none;
}
section {
width:800px;
margin:0 auto;
}
article {
width:800px;
height:600px;
}
#left, #right {
background: #000000;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 10px;
}
#left { left: 265; }
#right { right: 265; }
#hm_topleft {width:434px; height:300px; float:left;}
#hm_topright {width:366px; height:300px; float:left; background:#570401; margin=0; overflow=hidden;}
#hm_content {width:800px; height:300px; margin:auto; float:left; background-color:#000000;}
#hm_contentbox {width:760px; height:130px; margin:25px; background:#F1EEF2; border:3px solid #000000;}
</style>
<div id="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset=iso-8859-1>
<title>MAJID JORDAN - Home</title>
</head>
<body>
<header>
<nav class="header";>
<ul class="header">
<li>Home|</li>
<li>Members|</li>
<li>Albums|</li>
<li>Gigs & Tours|</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<section style="width:800px; margin:0 auto;">
<article style=" width:800px; height:600px; ">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\logo.jpg" width="200" height="170" alt="MAJID JORDAN"/>
<div
style="
padding: 10px;
top: 10;
right: 480;
position: absolute;
z-index: 1;
visibility: show;
font-size:35px;">
<h1><center><font face="verdana"><strong>MAJID JORDAN</font></center</strong><h1>
</div>
<div id="hm_contentbox">
<p class="s2">Majid Jordan is a Canadian R&B duo, composed of singer Majid Al Maskati and producer Jordan Ullman. They are signed to OVO Sound, the record label co-founded by rapper Drake, producer Noah "40" Shebib and Oliver El-Khatib.
Jordan, originally from Toronto, and Majid, arriving in Toronto by way of Bahrain, met as students at the University of Toronto in 2011. Working between Ullman's dorm room and his parents' basement, they launched their first joint EP titled Afterhours on SoundCloud under their previous name Good People.</p>
</div>
<div
style="
position: absolute;
top: 390px;
right: 285px;
border: 3px solid black;">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\home.jpg" width="400" height="300" alt="MAJID JORDAN"/>
</div>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:400;left:300;"><strong>
Members
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:480;left:300;"><strong>
Albums & Songs
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:560;left:300;"><strong>
Gigs & Tours
</button></strong>
<button style="border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:640;left:300;"><strong>
Gallery
</button></strong>
<footer style="position:absolute;top:710;>
<nav class="footer">
<ul class="footer">
<li class="hf1"><a>Members </a>|</li>
<li class="hf1"><a>Albums & Songs </a>|</li>
<li class="hf1"><a>Gigs & Tours </a>|</li>
<li class="hf1"><a>Gallery</a></li>
</ul>
</nav>
</footer>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>
I'm an extreme beginner when it comes to html, and I'm creating a small website on a band of my choice and it looks perfectly fine on the computer I used to create the website, but on another computer with a different resolution, the whole layout is messed up and objects are overlapping etc.
Any help would be greatly appreciated as like I said, I'm very new wit this language, if you need any more information I'll try and assist you.
You could of course Code your own solution, but this would be like reinventing the wheel and for beginners its really difficult. The most common solution is to use a CSS and/or JS Framework, like bootstrap or angularmaterial. This will not only give you the tools to make your site responsive with little to no effort it also has some cool design opportunities. You also don't need to worry about being restricted since you can "overwrite" some things in the framework with your own css Code.
For some Education you can look here:
http://getbootstrap.com/ ->Get Bootstrap (it's free)
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ -> some explanation to get a grasp on what you can do
http://www.w3schools.com/bootstrap/default.asp -> a well written beginner friendly tutorial for bootstrap
If you are not convinced yet check this out:
http://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
If you need some further advice or some more detail on specific questions, just contact me.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I made a simple search engine, all works well except for the design aspect. On the PC, the buttons appear top central but as soon as we get the design up on a phone, buttons are top right.
Applied one change, this is the updated version.
Phone: Android, Samsung Galaxy S4, 5 Inch 1080x1920
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Search</title>
<style>
*{margin:0px;
padding:0px;
}
#menu {
height:38px;
padding-top:0px;
background-color:white;
margin-left: auto
margin-right: auto
}
.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:0px;
width:811px;
height:98px;
margin-left:250px;
}
.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:816px;
opacity:0.6;
}
.photo .heading {
top:-50px;
}
.photo .caption {
bottom:-42px;
left:3px;
}
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#FF0;
font-size:16px;
display:block;
padding:5px 10px 0 10px;
}
.footer {
font-family: Calibri;
font-size: 18px;
color: #000;
}
head {
text-align: center;
}
menu1 {
text-align: center;
}
.footer a {
text-align: center;
}
.menuhead {
font-family: Calibri;
}
.menuhead {
font-size: 24px;
}
.menuhead {
font-size: 18px;
}
.footer1 {
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal">
<li>Books </li>
<li>Add Url</li>
<li>About Us</li>
<li>Contact Us</li>
</ul></div>
<p><center>
<p class="menuhead"><br>
</p>
<br>
</center>
</div>
<center>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>
<center>
<p><br>
</p>
<p> </p>
<p>
<input name='search' type='text' class="footer1" size='50'></font></p>
<p> </p>
</center>
<p class="footer1"><center>
<input name='submit' type='submit' class="footer1" value='Search Now'>
</center>
</p>
</form>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1"> </p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>
<g:plusone size="tall" annotation="i0nline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</center></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Take a look at my fiddle, the blue box is your old menu and the red box is my new menu.
https://jsfiddle.net/mykx37n9/4/
see how the red box stays centered, I used margin-left: auto margin-right: auto
#menu-2 {
height:38px;
width: 50px;
margin-left: auto;
margin-right: auto;
background-color: red;
}
You had your margin set to a fix sized, by changing it to auto it is now a relative size based off screen width.
EDITED FOR UPDATED QUESTION
Use this:
#menu {
height:38px;
padding-top:0px;
background-color:white;
text-align: center;
}
Here is the fiddle http://jsfiddle.net/28m3fpcv/6/
Also, remove this css, it is not valid:
head {
text-align: center;
}
menu1 {
text-align: center;
}
changed the line left: 500px to left: 50%;
#menu {
height:38px;
padding-top:0px;
background-color:white;
position: absolute;
top: 19px;
left: 50%; /* here it is */
margin-right: -50%; /* also this might be causing problem so try removing this line */
transform: translate(-50%, -50%) }
}
you can use this way to make your menu items align horizontally -
#menu ul li {
display: inline-block;
margin: ; /* add any margin you need between those buttons */
}
and to center the whole menu use the above method I described by removing margin-right: -50% OR go with margin: 0 auto; as suggested by others.
I am learning CSS by my onw, and already spent some hours on this, without solution...
I need to put a text over a image, but there is two images in the same line (inline-block). Please, see my code (example):
<html>
<head>
<title>Test</title>
<style type="text/css">
.payrow { display:inline-block; width:100%; margin-bottom:14px; text-align:center; }
.paybtn { display:inline-block; margin:0 10px 0 10px; text-align:center; }
.paybtn img { width:250px; height:120px; margin:3px; border:0; filter:alpha(opacity=80); opacity:.80; }
.paybtn a:hover img { filter:alpha(opacity=100); opacity:1; }
.vtotal { font:bold 20px Arial, Helvetica, sans-serif; color:#7A7A7A; }
</style>
</head>
<body>
<div class="payrow">
<div class="paybtn">
<img src="paybtn1.gif" alt="PayPal1">
<div class="vtotal">Total: U$ 510.00</div>
</div>
<div class="paybtn">
<img src="paybtn2.gif" alt="PayPal2">
<div class="vtotal">Total: U$ 580.00</div>
</div>
</div>
</body>
</html>
This is the result of my code:
And this is what I really want:
Please, can someone give me an idea of what to do?
Thanks!
You could use negative margins
.vtotal {
font:bold 20px Arial, Helvetica, sans-serif;
color:#7A7A7A;
position:relative;
margin-top:-40px; /*adjust the pixels accordingly*/
}
Demo at http://jsfiddle.net/gaby/5fxRf/
In the html doc I embeded it like that:
I don't see the problem here! Although I have never used any slider code before.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<script>
window.jQuery(document).ready(function(){
window.jQuery('.slider')._TMS({
show:0,
pauseOnHover:true,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:500,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:5000,
numStatus:false,
banners:'fromBottom',
waitBannerAnimation:false,
progressBar:false
})
})
window.jQuery(function(){
if(window.jQuery(window).width() <= 1066)
{
window.jQuery("#slider .prev").css("left", "55px")
window.jQuery("#slider .next").css("right", "55px")
}
})
</script>
</head>
Then in my body it looks like that:
<div id="slider">
<div class="slider-block">
<div class="slider">
<ul class="items">
<li><img src="images/Helikopter_Nockberge.jpg" alt="" /><div class="banner"><div><span>Routes</span><strong>Book a Flight</strong><p>Travel in First Class style - quick and comfortably from the airport to your Hotel. From your Hotel to the Formula One Race in Spielberg in less than 25 minutes. </p>More Info</div></div></li>
<li><img src="images/Helicopter_NockResort_Bad_Kleinkirchheim.jpg" alt="" /><div class="banner"><div><span>Services</span><strong>Landing and Starting</strong><p>Arrange your air journey to and from Bad Kleinkirchheim in the Nockmountains.</p>More Info</div></div></li>
<li><img src="images/Heliport_BadKleinkirchheim.jpg" alt="" /><div class="banner"><div><span>Location</span><strong>Bad Kleinkirchheim - Austrian Alps</strong><p>The Heliport Bad Kleinkirchheim is situated in the middle of the Ski Resort and Hiking Paradise.</p>More Info</div></div></li>
</ul>
</div>
</div>
</div>
And here is my slider css file:
to be honest I dont understand all of that code!
.slider { width:100%; height:400px; position:relative; padding-bottom:10px; overflow:hidden;}
.slider-block {width:1066px; position:absolute; left:50%; margin-left:-533px;}
.slider { width:960px; height:400px; margin:0 auto;}
.items { display:none;}
.pagination { display:none;}
.banner {background:url(../images/banner1.png) 0 0 repeat; position:absolute; z-index:100; top:0px; left:690px; width:270px; height:400px; font-size:11px; line-height:22px; color:#000; font-family:Arial, Helvetica, sans-serif; }
.banner>div {padding: 40px 30px 0px 40px;}
.banner span {display:block; font-size:35px; line-height:42px; color:#353535; font-weight:bold; font-family: 'Open Sans Condensed', sans-serif;}
.banner strong {display:block; font-size:20px; line-height:25px; color:#9f9fa6; font-weight:bold; font-family: 'Open Sans Condensed', sans-serif; margin-top:-3px;}
.banner p {text-transform:uppercase; margin-top:18px;}
.banner a {margin-top:52px;}
.prev {position:absolute; top:180px; left:0px; background:url(../images/prev.gif) 0 0 no-repeat; width:23px; height:41px; z-index:111 !important; display:inline-block;}
.prev:hover {background-position:0 bottom;}
.next {position:absolute; top:180px; right:0px; background:url(../images/next.gif) 0 0 no-repeat; width:23px; height:41px; z-index:111 !important; display:inline-block;}
.next:hover {background-position:0 bottom;}
I'm trying to make a horizontal nav bar on my website and I want to use CSS to position it closely under my websites name header and a portion of the background of the nav bar behind the icon to the left. Here is my code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;
function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}
function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";
setupPicChange();}
</script>
</head>
<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>
Home
Preassmbled
CPU
GPU
<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>
<div id="deals">
</div>
</div>
<div id="foot"
</div>
</div>
</body>
</html>
Not much to see here I guess it's obvious what I am doing, and my CSS
#charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}
#banner{
margin:auto;
position: relative;
}
#img{
float:left;
}
#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}
nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}
#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}
#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}
#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}
#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}
Now I want to have my nav bar very closely under the giant header text and the orange line background to go under the icon to the end of the white content border. I've tried all sorts of padding and margin mixing but its really just making a mess. I have looked around extensively but nothing seems to be working for me what works for others. Or I can't get all of what I'm looking to do. Anyone got any tips?
EDIT:I've tried a lot of padding to get the nav bar to stretch the screen but it keeps breaking the even separation of the buttons and their hover effects, is there another way to sort them evenly?
*SECOND EDIT NEW QUESTION*
I am trying to have my images change back and forth between the two after 5 seconds. I have seen code from other sites and don't see why it isn't working. Anyone notice what is wrong?
Update for comment:
I've updated the fiddle here to have exactly what you want. If you can't use calc on the list items and since you have a set width of 1000px, you can hardcode the widths in by doing this: width: (1000px - 192px) / 2, which would be width: 202px
Original answer:
If you will always have 4 menu items, set width: 25% (100% / 4) on each #list-nav li. Here's an updated fiddle
I also set the margin and padding on the li elements to 0.
Is this what you are looking for?
I am working on a project that is rather time sensitive. The task is to make a micro site that users can access through their smartphones, where they will be able to access a number of movies. They will scan a QR code (I know they are dead, I didn't plan the campaign). and land on this site. I am not a fontender, but know my way around html + css and I have been able to find a few things around the internet, but now I've come to a dead end. I am optimizing the site for max-width 640px with a 100% scalable width down to min-width of 320px. I've gotten it all working quite well on my test site, implemented fonts etc. but I run into a problem when I am trying to place the div #textbox inside the #sunny div, on top of the #image div. I have managed to center the #textbox, but I can't get it to align vertically and "stay" vertically aligned no matter what size screen the user views the page at.
Here is my code and css:
HTML:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<img id="logo" src="images/logo.png">
</div>
<div id="sunny">
<div id="image">
<img src="images/1.jpg">
</div>
<div id="textbox">
<p>Jacket Name</p>
See Details
</div>
</div>
</div>
</body>
</html>
And here is the CSS:
#font-face { font-family: FuturaStdBook; src: url('../fonts/FuturaStd-Book.otf'); }
#font-face { font-family: FuturaStdBook; font-weight: bold; src: url('../fonts/FuturaStd-Bold.otf'); }
#container
{
background: #fff;
font-family: FuturaStdBook, Georgia, "Times New Roman", Times, serif;
max-width:640px;
min-width:320px;
margin:0 auto;
}
#header
{
padding: 20px;
}
#logo
{
width:33%;
display:block;
margin:auto;
}
#sunny
{
width: 100%;
max-width:640px;
min-width:320px;
float:left;
position:relative;
}
#textbox {
background-color:white;
width:33%;
left:33%;
top:30px;
min-width: 70px;
height:50px;
text-align: center;
z-index:1;
position: absolute;
text-transform:uppercase;
padding-top:10px;
padding-bottom:10px;
color:#a3a3a3;
}
#textbox p {
font-size:14px;
line-height:0;
}
#textbox a {
font-size:12px;
color:#666666;
}
#image {
width:100%
position: absolute;
}
#image img{
width:100%;
height: auto;
}
N.B: Please bare in mind that I need to repeat the code, and have like 7 or 8 "identical" areas under each other, so the CSS have to be applicable to this design.
Hope someone is able to help me out :)
Seems like its a case of using too many divs. What you need to do is to place your elements in a div with position:relative, and then position the elements themselves as position:absolute and go about positioning them as you'd like.