I'm trying to set an image as the background but because it's a browser bases editor, I cannot just link the photo as they are not saved together.
<body>
<div id="backG"> <img src="(image link. i didnt add the link here as it is very long) " alt="concert stadium">
</div>
<div id="mainPage">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena
</h1>
</div>
<ul>
<li style="color:#ffe700;">
Home
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
< /ul>
</div>
</div>
</body>#
here is the CSS for the photo.
#backG{
diplay:block;
border:0;
}
Free Codepen does not let you host your own images, so you have to upload them somewhere else and link to them. A lot of people use dropbox or imgur
for this. Hope this helps!
Related
I have the main HTML page and another HTML page are located in the C:\Users\computer\Pictures. When I run the main HTML page and click on the link to another HTML page, it says "file not found. It may have been moved or deleted. ERR_FILE_NOT_FOUND."
I haven't moved and deleted the files since I saved HTML files in the C:\Users\computer\Pictures.
Here is the HTML code
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
Here is another HTML page
<style>
#Content{margin:5px auto;padding:0;width:600px;height:auto;border:1px solid #666;background-color:#f1f1f1}
#col{margin:5px;padding:0;width:590px;height:auto;}
</style>
<body>
<div id="Content" class="">
<div id="col" class="">
<p><font size="5" >
Hello, Welcome to my home page
</font>
</p>
<h1 align="center"> Activities </h1>
<p><font size="5" >
<ul id="ActivitiesList" class="">
<li> Soccer </li>
<li>Football</li>
</ul>
</font></p>
<p>
</div>
</div>
Try this: I use URIs like this all the time.
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If your index.html is in the same folder this should work:
<div id="Border" class="">
<div id="Topic_List" class="creature">
<ul id="ListName" class="">
<li> home </li>
<li>Life</li>
<li> Interest </li>
</ul>
</div>
</div>
If you get "File not found." As I see you got from the other post, go to the file, shift right click and select "Copy Path" Paste that into a notepad to verify the path is correct.
You have a formatting error in C:\\Users\\computer\\Pictures\\home.html. You should use C:/Users/computer/Pictures/home.html. HTML counts C:\\... as 2 slashes, not one. Also, HTML uses forward slashes (/) instead of backslashes (\).
I'm trying to figure out how to both place a caption beneath a picture and move text down. I'm trying to move the text that contains the second unorganized list down.
The figcaption with the text "Crazy Baby" appears on the top right of the picture it's supposed to be under. My understanding was figcaption would accomplish that although I'm clearly doing something wrong.
<div class="container">
<div class="jumbotron">
<div class="text-center">
<h1>The Golden Babies of 3 Orchard Lane</h1>
<p style="font-size: 30px;"><em>The Snady and Baby Maya</em></p>
<img src="http://oi63.tinypic.com/2ijkend.jpg" alt=" haha, sucks" class="Sandy">
<figcaption> <em>Snady Babushka</figcaption> </em>
<font size="5">
<ul>
<strong> Sandy loved</strong>
<li>Her red ball</li>
<li>Hiding in her jungle</li>
<li> Crossing her paws in an X</li>
<li> And most of all her big brother, Jonah </li>
</ul>
</font>
<br>
</div>
<img src="http://oi68.tinypic.com/8yb2f4.jpg" align="left" alt="I'm so sorry you can't see my baby face" class="Maya">
<figcaption><em>Crazy Baby</figcaption></em>
<font size="5">
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
</font>
</div>
</div>
Without seeing your CSS, this is what I'd recommend trying. First thing I would do it make sure you tags are placed in the correct order. In your unordered list, you have the div starting inside the tag, but ending outside of it.
<ul id="cap">
<div class="text-center">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Should look like this
<div class="text-center">
<ul id="cap">
<strong>Maya Loves</strong>
<li>Tennis balls</li>
<li>People more than dogs</li>
<li>Greeting someone as they enter the house</li>
<li> And of course, her big brother, Jonah</li>
</ul>
</div>
Then what you can do it with that div, give it a certain width, say the width of the image. Then float both the image and the list, left.
.text-center {
width: 100px; (Just an example)
}
.text-center img,
.text-center ul {
float: left;
}
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.