I am learning how to use HTML and css, and want to add a shopping cart at the right side just below the
menu1, menu2, menu3, menu 4 bar, but do not know how to do it, I was trying to do a .description definition in the css but had no luck I have a simulation of this, of course i cant upload images which are in images folder...
http://cssizer.com/build/preview/wzNqVAyI
and here is the source
http://cssizer.com/JKQLGFIM
So I am trying to make the description definition appear just below the menu bar and after that an image of a shopping cart , but do not know how to define it well, How should I modify the code to get something like this
instead of
If you want to add a cart icon on the right side of your website, Hear are the html codes.
<div id="head">
<div id="head-one">
<h1>TOM TOC</h1>
<h2>Slogan de </h2></div>
<div id="head-two"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/64x64/shopping_cart.png" /></div>
<div class="clear"></div>
</div>
Hear are the css codes.
#head-one{float:left; width:700px;}
#head-two{float:right; width:70px;}
.clear{clear:both;}
Guess it helps you.
hi now add overflow:hidden in your #nav id
as like this
#nav{
overflow:hidden;
}
*result is*
Related
I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.
The navbar is currently an ul with a background image that appears from the right on hover.
I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.
Here's the navbar code:
<div class="container-fluid menuholder">
<div class="menu">
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
</div>
</div>
and here's a relevant part of one of the sections it's supposed to automatically scroll to:
<div class = "container">
<div class="row">
<div class ="chap1title col-md-3" id="chap1">
<h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
</div>
</div>
</div>
Aaaand here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to
Frontpage
Navbar
Where I'd like it to scroll to
Thank you so much in advance!
It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
It seems like menu text is a class name, which should be added in the class
I'm using Wordpress 5.2.2 with Newspress Extend theme as the parent.
I restored the default settings of the theme in Appearance --> Newspress Options in an attempt to fix something unrelated, and lost the custom html/inline css that floated the advertisements, one left and one right to be sandwiching the logo. Oops. I tried to guess the replacement code based on my very limited knowledge of html/css and it's rendering them above not only the logo, but the top menu as well. I know this change can be done in this section because I'm just trying to restore it to what it was from the previous developer. Help would be greatly appreciated.
Appearance --> Newspress Options --> General Options --> Custom code within Head area (all pages)
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;">
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;">
custom css screenshot
logo screenshot in Newspress theme's custom interface
page in question
Your ads are sitting outside of the container div. They're actually sitting above the site's metatags at the moment. CSS is a powerful tool, but it shouldn't be used to over-correct or mask improper HTML structure. You need to stuff your ads into their respective divs.
This is how your HTML should look, specifically for your header div:
<div id="header">
<div id="header-content">
<!-- Site Titele and Description Goes Here -->
<div class="topadlft"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
<img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1>
<h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>
<div class="topadrt"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
</div><!-- header-content -->
<div class="heading-date">Friday, October 4, 2019</div>
</div>
You will also want to turn off the "display:none;" selectors in your CSS file for the "topadlft" and "topadrt" classes. Also remove the inline styles from each ad image. You're going to want the div classes that contain the ads to do the heavy lifting here. Inline styles will just cause further complications.
Once you've addressed the above, you should wind up with something that looks like this:
Fixed Header Image
I need some help here.
I found the "Miniport" template by "html5up" and I want to use this template as a base for my future projetc.
The demo can be seen here: http://html5up.net/miniport
On the demo we can see that bellow the website menu is an circular image and next to it is some texts. I need to know how to remove that image and center the texts so the texts can match the rest of the template (the site has the divs centered too).
I dont have much skills on css nor html5. Im a fan and I want to learn.
If anybode can help me, please..
Sorry about my english.
I too am using this template.
In order to remove the image, open the html document.
Delete this code that is found between ~line 42—46: (this is what formats and holds your image)
<article class="container" id="top">
<div class="row">
<div class="4u">
<span class="image fit"><img src="images/angela.jpg" alt="" width="118%" height="350" /></span>
</div>
Reformat the div tag:
<div class="8u"> to <div class="container" align="center">
By doing this, you are modifying the style within the html document rather than the css doc. This is good since you do not want to change every div tag in the html doc, just this one. Additionally, adding align="center" helps override most css formatting within your divs. You can use that trick later on in your site.
On a side note, double check that you like the command the contact form uses. I do not, since it opens up my computer's email app rather than directly sending the email through the webpage. That's my next project.
Enjoy!
I built a website, http://charlottemobiletrainers.com and the main logo on the index page shows up for me using Chrome but not in Safari and doesn't show up for my friend on their laptop in any browser. The photo was a ".gif" and I changed the file to ".png" just to see if that changed anything but it didn't help. And then I tried renaming the file because I used "_" in it originally but that didn't help. I don't know what else to try.
The image is currently in my style.css file. Could that be the problem?
You've laid it out quite oddly to start with. I would do it like this:
<div id="featured">
<div class="left">
<h3>Mobile Personal Trainers</h3>
<p>Are you ready for summertime in Charlotte? Let Mobile Trainers help you look and feel your best with a personalized workout program <i>JUST FOR YOU!</i> Our personal trainers will go wherever you want whenever you want. Let's get started!</p>
<input type="button" value="Get Started!" onclick="parent.location='contact.html'">
</div>
<div class="right">
<img src="logo.png" width="blah" height="blah" alt=""/>
</div>
Then set the #feature to the width and height you want it to be then set the class .right to whatever width the logo is and the remaining width set to the .left class.
I am new to web building. Currently following a tutorial for making an image gallery.
http://www.webreference.com/programming/css_gallery/index.html
It all works okish (enough for me to fix things to my liking) apart from the thumbnail section. Below is a snippet of the html and css for the thumbnails which I think is relevant to the help I seek. Basically, when you hover over the thumbnail, the main image will appear in a free space in the page above. That kind of works (image doesnt appear in the right place, but I can fix that no probs) but the thumbnails are not displaying my images.
I changed the container div to "gallery" as I already have a container in my html, and dont want it to be affected by the new css following the tutorial...
html:
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" />
<br />
Wedding
<br />
Outside area wedding
</span>
</a>
</li>
CSS:
#gallery a.slidea {
background:url(images/Picture 014 thumb.jpg);
height:38px;
width:50px;
}
Also for my CSS, the W3C validator says " #gallery a.slidea " Value Error : background Parse Error thumb.jpg) which I dont understand.
Would love some help :D
Cheers
P.S I'm looking at putting this website onto wordpress (thats a tutorial I'll follow later on with more success I hope)
Your error is here:
background:url(images/Picture 014 thumb.jpg);
That space is throwing it off. Put the url in quotes:
background:url('images/Picture 014 thumb.jpg');
The other problem is in your HTML.
Your CSS says #gallery a.slidea
This would point at all links with the class 'slidea' that are in an element with the id of 'gallery'. Your HTML indicates that the link is of class 'gallery' and 'slidea'. The right way to do it would depend on your goals.
The call to the class doesnt match the name of the class
<a class="gallery slidea" href="#nogo">
is calling
#gallery a.slidea {
Try making them the same name, e.g.
<a class="gallery_slide" href="#nogo">
#gallery_slide a {