I'm new to html and css. I've gotten a college assignment to create a webpage and i went somewhat overboard on the design something that was supposed to be simple has gotten somewhat complicated.
I'm currently trying to list the cast of a tv show down the left hand side of my page.
->Wire-frame example <-
Everything I have tried has failed, I'm feeling beaten here is an example of what I've managed to do trying methods i know or have found online hoping it would do the trick.
->Current Progress<-
->Link to current HTML<-
As you can see in the wire-frame, I'm ideally wanting their names centred under the pictures, which is my struggle.
Any ideas?
Thanks.
The problem you're having is that the label and the image belonging to one actor are not grouped. Put them inside a <div> container.
<div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Travis</div>
</div>
<div class="actor">
<img src="Pictures/willingham.jpg" class="actor-image">
<div class="actor-label">Laura</div>
</div>
</div>
Here's the new CSS:
.actor {
display: inline-block;
}
.actor-image {
width: 86px;
}
.actor-label {
font-weight: bold;
}
Note that I also improved a lot of other things like removing unnecessary code or using CSS to style elements instead of HTML (cause that's what CSS is for). If you want the labels to look different just change/add the properties inside the .actor-label selector.
Related
Hello,
I was wondering if there was a way to create a drop down menu using HTML & CSS at once without having two separate files to reference. I use a website called Experience Builder which is owned and operated by ESRI.
It allows the user to make their own web pages and link data to widgets that the user can put in the page. However, it's a bit limited on the creativity front. I would like to see a drop down menu in one of my pages.
There is an "embed" widget. I am able to insert code into this widget. However, I can't reference files. So if I wanted to create something that uses CSS & HTML I'd need to combine them into one big block of code.
I would greatly appreciate any help w/ this task. I'm starting to take courses on this topic, but I'm not that experienced yet. It doesn't need to be anything fancy and if I have the framework I know enough to modify it.
Even if someone would have a resource that they could link to that I could read and figure it out I'd appreciate it.
Thanks!
In HTML you can include a <style></style> tag where you can then input whatever CSS you want. Take a look at the snippet below, the CSS is in the style tag in the HTML
<style>
.divs {
height: 3rem;
width: 3rem;
}
#div1 { background: red }
#div2 { background: blue }
#div3 { background: green }
</style>
<div class="divs" id="div1">
</div>
<div class="divs" id="div2">
</div>
<div class="divs" id="div3">
</div>
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
Using Compass, I am generating Image Sprites and CSS.
This works great, however, since I am generating numerous sprite images and CSS, mapping the image to the class names can take quite some time for myself and the other developers.
I have currently created some regular expressions in DreamWeaver to allow me to generate an HTML page that displays the images, along with their corresponding class names, however, it is not the best layout as it just lists them in floating divs, and I would prefer to display them in either a tabular format using tables, or groups of 7 divs per row.
My code currently looks like...
...
<body>
<table>
<td class="sprite-container">
<div class="sprite-image myimage001"></div>
<div class="sprite-label">myimage001</div>
</td>
<td ... and so on...
I would like to either have a regular expression to wrap each group of 7 instances of the TD content with TR tags so that it will appear neat and tidy. (I've also done using just divs, etc, but since I am doing manually, this has been the easiest to maintain)
I have been currently doing this manually... counting every 30 rows from a td group and inserting the tags... this is monotonous, and since I am working with over 800 classes, takes quite some time to do... and I have to REDO every time I regenerate the sprites! ugh!
Alternatively, I am open to other suggestions as to how to better approach this... i.e. a script, tool, ruby gem, regular expression, etc.. Thanks in advance for any assistance. I hope that someone else finds this useful.
Note:
The Process I currently use is I copy the CSS file into a new document.
I remove any erroneous CSS (multiple sets).
I run the following regular expressions via find-replace
FIND > \{[\w\W]*?\}
REPLACE > NOTHING
FIND > .(sprite[\S]*)\s
REPLACE >
<td class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</td>
Then I do my manual editing by adding the CSS references, HTML tags, etc to get it to display properly.
Thanks again in advance for any assistance you can provide!
Simplest way is to use a DIV instead of a TD.
<DIV class="sprite-container">
<div class="sprite-image $1"></div>
<div class="sprite-label">$1</div>
</DIV>
Then use CSS to style the sprite-container. All that's required is that sprite container be position: relative and float: left.
.sprite-container {
position: relative;
float: left;
margin: .5em;
min-width: 50px; min-height: 50px;
background-color: yellow;
}
Then use CSS :nth-child to make every element that is at the start of a new line of 7 spite-container's force a break in the floating layout.
.sprite-container:nth-child(7n+1) {
clear: left;
}
Here's a jsfiddle. http://jsfiddle.net/KQ59S/
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.